Canvas.toDataURL 画像/png エラーの対処方法

今回は、canvas.toDataURL image/pngエラーレポートとその対処方法、そしてcanvas.toDataURL image/pngエラーレポートに対処する際の注意点についてお届けします。実際のケースを見てみましょう。一見。

問題の背景:

、再生された video のスクリーンショットを撮るという要件が発生しました。ビデオは video タグを使用して再生され、ビデオ再生領域をクリックするとリアルタイム フレーム picture がキャプチャされます。

コードは次のように非常に単純です:

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.

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

解決策:

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

モバイル Web ページのコンテンツをアダプティブにする方法

テーブル内のコンテンツのオーバーフローに対処する方法

textarea の動的な残りの単語数を取得する方法

以上がCanvas.toDataURL 画像/png エラーの対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。