クロスドメイン画像リソースのアクセス許可 (CORS 対応画像)

HTML 仕様ドキュメントでは、画像の Crossorigin 属性を導入しています。適切なヘッダー情報 CORS を設定することで、現在のサイト (現在のオリジン) から直接ダウンロードしたのと同じように、img 画像を他のサイトからロードしてキャンバスで使用できます。

Crossorigin 属性の使用の詳細については、CORS 設定の属性を参照してください。

CORS 認証なしでキャンバス内の画像を使用することは可能ですが、使用するとキャンバスが汚染されます。 キャンバスが汚染されている限り、データをキャンバスから抽出することはできません。つまり、toBlob()、toDataURL()、getImageData() などのメソッドを呼び出すことができません。呼び出せない場合は、セキュリティ エラーがスローされます。

これは実際には、ユーザーの個人情報を保護し、リモート Web サイトからユーザーの画像情報を許可なく読み込んでプライバシー漏洩を引き起こすことを避けるためです。

（訳者注：ユーザーがQQなどのSNSにログインしている場合、保護がされていない場合、Webサイト開設後にキャンバスを利用してユーザーの画像情報を取得・アップロードし、漏洩が発生する可能性があります。）

まず、画像サーバーは対応するAccess-Control-Allow-Origin応答ヘッダーを設定する必要があります。 img要素のcrossOrigin属性をリクエストヘッダーに追加します。たとえば、Apache サーバーは、HTML5 ボイラープレート Apache サーバー構成の構成情報をコピーして応答できます。

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin : IS_CORS ヘッダー セット Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

これらの設定が有効になると、このサイトのリソースと同様に、他のサイトの画像を DOM ストレージ (または他の場所) に保存できるようになります。

 var img = new Image, Canvas = document.createElement(canvas), ctx = Canvas.getContext(2d), src = http://example.com/image; // 特定の画像アドレス img.crossOrigin = Anonymous;img. = function() { Canvas.width = img.width; Canvas.height = img.drawImage( img, 0, 0 ); localStorage.setItem(savedImageData, Canvas.toDataURL(image/png) );}img.src = src;// キャッシュされた画像もロードイベントをトリガーするようにします if ( img.complete || img.complete == = 未定義) { img.src =データ:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==; img.src = src;}

ブラウザの互換性

デスクトップ

携帯

こちらも参照

Chrome: WebGL でクロスオリジン画像を使用する

HTML仕様-crossorigin属性

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。