クロスオリジン画像リソース権限（CORS 対応画像）

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

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

「汚染された」キャンバスとは何ですか?

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

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

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

例: 他のサイトから画像を保存する

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

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf オリジン ":" IS_CORS
        ヘッダー設定 Access-Control-Allow-Origin "*" env=IS_CORS
    </ファイル一致>
    </モジュール>
</モジュール>

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

var img = 新しい画像、
    キャンバス = document.createElement("キャンバス"),
    ctx = キャンバス.getContext("2d")、
    src = "http://example.com/image"; // 特定の画像アドレス img.crossOrigin = "Anonymous";

img.onload = 関数() {
    キャンバスの幅 = img の幅;
    キャンバスの高さ = img.height;
    ctx.drawImage(画像, 0, 0);
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
src = src;
// キャッシュされた画像もロードイベントをトリガーするようにします if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    src = src;
}

ブラウザの互換性

デスクトップ