crossorign属性は、img, audio, video, script, link要素で指定できます。CORS(Cross-Origin Resource Sharing)に関する属性で、異なったドメイン(プロトコル, サーバ名, ポート番号の組み合わせ)間で画像などを共有するために使用します。
単に他ドメインの画像を表示するだけであれば、crossoriginは不要ですが、他ドメインから得た画像を canvas に貼り付けると canvas は「汚染(tainted)」されてしまい、toBlob(), toDataURL(), getImageData() などによって canvas からデータを取り出すことができなくなります。crossorigin はこれを許可するために用いられます。
ただし、まだ設定が足りないのか、ブラウザがサポートしていないのか、下記のサンプルをうまく動作させるには至っていません。(時間のある時にもう少し調べてみよう...)
<script> window.onload = function() { draw(); } function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.crossorigin = "Anonymous"; img.src = "http://other-site.exapmple.com/sample.png" + "?" + new Date().getTime(); img.onload = function() { context.drawImage(img, 40, 40); var base64 = canvas.toDataURL("image/png"); // crossorigin無しだとエラー : } } </script> <canvas id="canvas" width=400 height=400 style="border:1px solid gray;"></canvas>
※ 画像に getTime() をつけているのは、Internet Explorer のキャッシュに対する対策です。