bouzuya.hatenablog.com

ぼうずやのにっき

Image の crossorigin 属性をためした

週ぶり (shuburi) 2015-W15

tdict (仮) の正式名称を torzder に決定した。

さっそく bouzuya/torzder に README だけのリポジトリをつくった。昨日の続きで整理を続けているが、今日はまだできないので、空のリポジトリをつくった次第。

date week day repos
2015-04-06 X (2 commits) X (+2 commits ) hubot-idcf-vm-auto-stop
2015-04-07 X (2 commits) X (+0 commits ) -
2015-04-08 X (3 commits) X (+1 commits ) torzder

よもやまばなし

CORS Enabled Image - HTML | MDN load() を使うと Chrome が文句言う - 積極的にメモっていく姿勢

Image (img 要素) ではクロスドメインかどうかは基本的に気にする必要はないと思っていたのだけど、どうやら Canvas に読み込むと Canvas が汚染 (taint) されてしまうらしい。そこで CORS : Cross Origin Resource Sharing を Image に対して使う必要が出てくる。

img 要素には crossorigin 属性が用意されている。ここに属性値を設定しておくと、CORS を使って画像を取得してくれる。

Canvas を使う画像を Amazon S3 から取得していたので、クロスドメインになっていた。その対策として S3 側には CORS 設定を追加し、Canvas 側には Image に上記の crossorigin 属性を設定すれば回避できる。