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;}ブラウザの互換性
デスクトップ
| 特徴 | クロム | Firefox (Gecko) | インターネットエクスプローラー | オペラ | サファリ |
|---|---|---|---|---|---|
| 基本サポート | 13 | 8 | サポートなし | サポートなし | ? |
携帯
| 特徴 | アンドロイド | Firefox モバイル (Gecko) | IEモバイル | オペラモバイル | サファリモバイル |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |
こちらも参照
Chrome: WebGL でクロスオリジン画像を使用する
HTML仕様-crossorigin属性
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。