canvas.toDataURL image/png 報錯應(yīng)該如何處理

問題背景：

遇到一個需求，要對播放的視頻進(jìn)行截圖，視頻使用video標(biāo)簽來播放，然后點擊視頻播放區(qū)域時截取實時的幀圖片。

代碼很簡單如下：

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.

經(jīng)過查閱和分析，發(fā)現(xiàn)這個其實是由于視頻文件所在的域和圖片和頁面所在域不同，出現(xiàn)跨域傳輸?shù)膯栴}。

解決方案：

將視頻文件放到頁面所在域下。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣讓移動端的網(wǎng)頁內(nèi)容自適應(yīng)

table表格中的內(nèi)容溢出應(yīng)該如何處理

怎么實現(xiàn)獲取textarea的動態(tài)剩余字?jǐn)?shù)

以上就是canvas.toDataURL image/png 報錯應(yīng)該怎么處理的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！