『S3 にアップしたファイルの CORS(Cross Origin Resource Sharing) を許可する方法 | phiary』の続きです.

S3 で CORS を許可した画像や, GitHub Pages にアップした画像を HTML5 Canvas で使っている際に,
toDataURL() や getImageData() を実行してエラーになった経験ってないですか？

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.  

キャンバスが汚染されてるよーというエラーですね.

画像の CORS が許可されてるのであれば, img タグにちょっとした設定をすることで解決します.

Demo

まずはデモです. 画像をクリックすると新しい window で base64 化した画像が表示されるかと思います.

Points

img の attribute である crossOrigin という値に anonymous と設定することで クロスオリジンのファイル参照を許可できます.

上のでデモでも下記のように指定しています.

img.crossOrigin = 'anonymous';  

試しにこのコードの箇所をコメントアウトしてみてください. エラーが出るようになるのが分かるかと思います.

また crossOrigin には下記の値が設定可能です.

• anonymous ... この要素からの CORS リクエストに認証情報フラグをセットしない。
• use-credentials ... この要素からの CORS リクエストに認証情報フラグをセットする。リクエストには認証情報が提供される。

何も指定されていない場合は, CORS は利用されません.