CORS Enabled Image

HTML 仕様には <img> 要素に crossorigin 属性が定義されています。この属性と適切な CORS ヘッダを組み合わせることで、異なる origin から読み出された img 要素の画像を、あたかも同じ origin から読みだしたもののように Canvas から扱うことができます。

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

Canvas の「汚染」?

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

これはこうした制限をかけることによって、外部 Web サイトがユーザのプライベートな情報を画像を利用して許可なしに引き出すことを防いでいるのです。

例: 異なる origin から画像を保存

サーバが適切な Access-Control-Allow-Origin ヘッダを付加するように設定していれば、そのサーバ上の画像があたかも同じドメインから提供されたものであるかのように扱えます。ここでは、画像を localStorage に保存します。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://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;
}

ブラウザの互換性

参考

• Using Cross-domain images in WebGL and Chrome 13
• HTML Specification - the crossorigin attribute