ホームページ >ウェブフロントエンド >htmlチュートリアル >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 ページのコンテンツをアダプティブにする方法
以上がCanvas.toDataURL 画像/png エラーの対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。