キャンバスに外部リンク画像を描画すると、クロスドメインの問題が発生します。
例は次のとおりです。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = Canvas.toDataURL('image/png'); ; 画像.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';ブラウザでこのページを開くと、次の問題が発生します。
キャッチされない DOMException: 'HTMLCanvasElement' で 'toDataURL' の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性があります。
これは CORS ポリシーによって制限されており、画像を使用することはできますが、キャンバスに描画するとキャンバスが汚染され、たとえば、キャンバスのデータを抽出できなくなります。 Canvas toBlob() または getImageData() メソッドは使用できません。これらのメソッドを使用すると、上記のセキュリティ エラーがスローされます。
これは厄介な問題ですが、幸いなことに img には、画像取得プロセス中に CORS 機能を有効にするかどうかを決定する Crossorigin 属性が追加されています。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0).src = キャンバス.toDataURL('画像/png') }; 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';上記の 2 つの JS コードを比較すると、次の余分な行が見つかります。
image.setAttribute('crossorigin', 'anonymous');とてもシンプルで完璧な解決策です。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。