canvas.toDataURL image/png 報錯該怎麼處理

這次帶給大家canvas.toDataURL image/png 報錯該怎麼處理，處理canvas.toDataURL image/png 報錯的注意事項有哪些，以下就是實戰案例，一起來看一下。

問題背景：

遇到一個需求，要對播放的視訊進行截圖，視訊使用video標籤來播放，然後點擊視訊播放區域時截取即時的幀圖片。

程式碼很簡單如下：

var video = document.getElementById('video');   
  
var canvas = document.getElementById('canvas');   
  
var ctx = canvas.getContext('2d');   
  
var img = document.getElementById('img');   
  
function snapshot() {   
   ctx.drawImage(video,0,0);   
   img.src =  canvas.toDataURL('image/png');   
}   
  
video.addEventListener('click', snapshot, false);

問題提示：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

經過查閱和分析，發現這個其實是因為影片檔案所在的網域和圖片和頁面所在網域不同，出現跨網域傳輸的問題。

解決方案：

將影片檔案放到頁面所在網域下。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

如何讓行動端的網頁內容自適應

table表格中的內容溢位應該如何處理

怎麼實作取得textarea的動態剩餘字數

以上是canvas.toDataURL image/png 報錯該怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！