crossorigin=state - CORS指定

トップ > HTMLリファレンス > crossorigin=state

属性

<タグ名 crossorigin=state> - CORS指定

説明

crossorign属性は、img, audio, video, script, link要素で指定できます。CORS(Cross-Origin Resource Sharing)に関する属性で、異なったドメイン(プロトコル, サーバ名, ポート番号の組み合わせ)間で画像などを共有するために使用します。

単に他ドメインの画像を表示するだけであれば、crossoriginは不要ですが、他ドメインから得た画像を canvas に貼り付けると canvas は「汚染(tainted)」されてしまい、toBlob(), toDataURL(), getImageData() などによって canvas からデータを取り出すことができなくなります。crossorigin はこれを許可するために用いられます。

説明
anonymous認証情報を使用しない
use-credintials認証情報を使用する

ただし、まだ設定が足りないのか、ブラウザがサポートしていないのか、下記のサンプルをうまく動作させるには至っていません。(時間のある時にもう少し調べてみよう...)

使用例

HTML
<script type="text/javascript">
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 のキャッシュに対する対策です。


Copyright (C) 2015 杜甫々
初版:2015年1月4日 最終更新:2015年1月4日
http://www.tohoho-web.com/html/attr/crossorigin.htm