canvas.toDataURL()エラーの詳細な解決策はすべてこちら

エラーの詳細情報

Uncaught DOMException: HTMLCanvasElement' で 'toDataURL' の実行に失敗しました。汚染されたキャンバスはエクスポートされない可能性があります。

キーワード

• canvas.toDataURL()
• クロスオリジン {を使用します。
• アクセス制御-許可-オリジン {を使用します。

プリアンブル

最近、創造的なクラスの画像合成ツールをやって、おそらくチーは、関数に類似した商品の画像を生成するためにカスタムテキストや画像情報をステッチすることによって、プロジェクトはfabric.jsこの描画ボードライブラリ、画像を保存する際の最後のステップは、エラーの長いリスト、壁の壁の上に報告したときに再び検索、与えられたソリューションは、学生が再びピットに足を踏み入れる避けるために、包括的ではないため、そこにこの記事である。

{を使用します。 テキスト

convertDOM2Imageを行う際、DOM内に画像リソースがある場合、そのリソースがあるWebサーバーがクロスドメインに対応していないため、画像の保存がうまくいかない。

そのため、トラブルシューティングを行う際には、まず

{を使用します。 Webサーバーがクロスドメインを許可しているかどうか、nginxを例にとると、レスポンスヘッダーにはAccess-Control-Allow-Orgin:xxxx（*の場合もあり、セキュリティ要件が高い場合はメインドメインに応じてカスタマイズできます）が存在する必要があります。 {を使用します。
• imgタグの場合、crossorigin="anonymous "を追加するかどうか、Imageオブジェクトの場合、obj.crossOrigin='anonymous'というプロパティを追加するかどうか同じです。
• それでもダメなら、ここで答えを出さないで、栗を見ましょう

次の栗では、画像をキャンバスオブジェクトに変換するメソッドを使います

function convertImageToCanvas(image) {
// Create the canvas DOM element and set its width and height to be the same as the image 
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
// In our actual development, we need to transfer the base64 image encoding after the capture to the backend image server, which stores or generates an image directly from the server.
// so we will use toDataURL
console.log(canvas.toDataURL('image/jpeg'))
return canvas;
}

チェスナット1

ローカルでcrossorigin=anonymousが設定されていない、ウェブサーバでクロスドメイン許可オプションが設定されていない

<div id="d1">
<img style="width: 300px;height: 240px;" src="http://jb51.net/images/cover_thumbnail_3rd.jpg" alt="""& gt;
<p>Local does not have the cross-origin=anonymous option set,web-server does not have the cross-origin option set</p>
</div>
<button onclick="setCanvas('d1')">canvas save</button>

明らかな、エラーの報告

チェスナット2

ローカルタグでクロスドメイン許可オプションを設定すると、ウェブサーバがクロスドメイン許可オプションを設定しない

今度は画像も出てこず、エラーが報告されるだけです

これはわかりやすく、ブラウザ ホモロゲーションポリシー 制限事項

オリジン「null」からの「xxxx」（「xxxx」からリダイレクト）の画像へのアクセスは、CORSポリシーによりブロックされています。要求されたリソースに「Access-Control-Allow-Origin」ヘッダが存在しません。

チェスナット3

クロスドメイン許可オプションがローカルに設定されていない function setCanvas(DOMID) { let img = document.getElementById(DOMID).querySelector('img') document.body.appendChild(convertImageToCanvas(img)) } , {コード クロスドメインで使用可能なオプションの設定

ちゃんと、エラーを報告する。

チェスナット4

ローカルタグの中にクロスドメイン許可オプションを設定する crossorigin=anonymous , {コード クロスドメインで使用可能なオプションの設定

web-server

うまくいくとは思えないのですが、～コード内でクロスドメインを設定したらどうでしょうか？

チェスナット5

crossorigin=anonymous

エラー報告

なるほど 公式文書 は、画像の認証情報を信頼させるために crossOrigin=anonymous を並列に設定する必要があることを意味します。

これは、CORSが有効であり、ドキュメントがロードされたのと同じオリジンから画像がフェッチされた場合、クレデンシャルが送信されることを意味します。

それ以外の場合、キャッシュされた画像データは、キャンバスによって汚染されたクロスオリジンコンテンツとして扱われたままです。

どうすればいいのか？画像をもう一度取得し、乱数を追加すると、画像は同じままですが、ブラウザが認識できないベストが付きます。

チェスナット 6

web-server

BINGGO、パーフェクトソリューション

そこで、新規画像、画像の置き換え、画像の復元などの機能のコード内に、開発中に毎回乱数を追加して、ソースが最新でキャッシュに行かないようにする必要があります

fabric.jsについてもう少し詳しく、クロスドメイン設定については下記をご参照ください。

<div id="d4">
<img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" ; alt="" crossorigin="anonymous">
<p>Local set cross-domain allow option `crossorigin=anonymous`,`web-server` set cross-domain allow option</p>
</div>
<button onclick="setCanvas('d4')">canvas save</button>

github http://github.com

canvas.toDataURL()エラーの解決方法についてはこちらの記事が全てです、よりcanvas.toDataURL()エラーに関連する内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします！(｀・ω・´)