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.

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

解決方案：

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

更多canvas.toDataURL image/png 錯誤處理方法推薦相關文章請關注PHP中文網！