HTML 仕様書では、画像に crossorigin 属性を導入し、適切な CORS ヘッダーと組み合わせることで、 <img> 要素で定義された他のオリジンから読み込まれた画像を、 canvas の中で現在のオリジンから読み込まれた画像のように扱うことができます。

crossorigin 属性の使い方については CORS 設定属性をご覧ください。

「汚染された」 canvas とは

CORS を用いずとも canvas で画像は扱えますが、この場合 canvas は汚染 (taint) されてしまいます。 canvas が一度汚染されてしまうと、その canvas からデータを取り出すことはできなくなります。つまり、 toBlob(), toDataURL(), getImageData() などのメソッドが使用できなくなります。使用するとセキュリティエラーが投げられます。

これによって、外部のウェブサイトが許可なしに情報を引き出すために、画像を使用して個人的なデータを暴露することからユーザーを守ります。

例: 異なるオリジンから画像を保存

適切な Access-Control-Allow-Origin ヘッダーを使用して、画像をホスティングするサーバーが必要です。 crossOrigin 属性を追加すると、リクエストヘッダーを生成します。 HTML5 Boilerplate Apache server 構成からの抜粋を利用して、このレスポンスヘッダーで適切に応答することができます。

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

与えられた一連の画像は、同じドメインから提供されたものであるかのように、画像を DOM Storage に保存することができます。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, himrock922, teoli, myakura
最終更新者: mfuji09,