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; }
ブラウザの互換性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 13 | 8 | 未サポート | 未サポート | Nightly build |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |