この記事では、キャンバスからクロスドメインにエクスポートされた画像のロックを解除するための N の姿勢の概要を紹介します。詳細は次のとおりです。
キャッチされない DOMException: 'HTMLCanvasElement' で 'toDataURL' の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性があります。
Canvas を使用して toDataUrl を実行して画像をエクスポートするときに、セキュリティ ポリシーで画像のクロスドメイン エクスポートが許可されていないため、画像サーバーのドメイン名が現在のものと異なる場合は、誰もが上記のエラーに遭遇したことがあると思います。
この広範囲にわたる問題を解決するには多くの方法があります1.画像をbase64に変換します画像がbase64になるとドメイン名がなくなり、当然クロスドメインもありません。
注: 画像を Base64 に変換し、画像ファイルのサイズを大きくします。画像が比較的大きい場合は、Web ページの読み込み時間が長くなり、Web サイトの速度に影響を与えるため、Base64 に変換することはお勧めできません。小さな画像用。
2. 画像サーバー設定によりクロスドメインが許可されるつまり、画像のリクエストによって返される応答ヘッダーにはAccess-Control-Allow-Origin (すべての Web サイトからのクロスドメイン リクエストを許可)、または現在の Web サイトのドメイン名 (以下の場合にのみクロスドメイン リクエストを許可) が含まれます。固定ドメイン名)、その後、フロントエンドが画像のクロスオリジン属性img.crossOrigin=anonymous。具体的なコードは以下の通り
var Canvas = document.getElementById('myCanvas') var ctx = Canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }このように、フロントとリアの両方を組み合わせることで、クロスドメインの問題を簡単に解決できます。
3. 現在のドメイン名の下に画像を置きます不親切に笑って申し訳ありませんが、これは確かに問題の解決策です。
ただし、実際のプロジェクトでは画像は CDN 上に保存されることが多いため、この方法は現実的ではありません。