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 toexecute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvases might not be exported.

レビューと分析の結果、これが判明しました。実際には、ビデオ ファイルが原因です。画像が配置されているドメインとページが配置されているドメインが異なるため、クロスドメイン送信の問題が発生します。

解決策:

ページのドメインの下にビデオファイルを置きます。

Canvas.toDataURL 画像/png および推奨されるエラー処理方法の詳細については、PHP 中国語 Web サイトに注目してください。