みなさんこんにちは！
Canvasを扱って開発をしているのですが、
Canvasに画像を埋め込んで、そのCanvasを画像にする処理で
どうしてもエラーが出ていました。
そのエラーが、
Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
このように書かれていました。
翻訳を使い日本語に変えると、
‘HTMLCanvasElement’で ‘toDataURL’を実行できませんでした：汚染されたキャンバスはエクスポートできません。
と表示されました。
セキュリティのためにエクスポートできない制限されているのでしょう。
今回は、このエラーを出さず、画像を埋め込んだcanvasをエクスポートする方法を書いていきます。！
ただし、私的に使用する場合には使える方法ですが
セキュリティ的に不安なので実用的ではありません。
クロスドメインの画像をCanvasに埋め込んでエクスポート！
この方法はPHP,JavaScriptを使って書いていきます！
まずは、
画像のデータがあると思います。おそらく
http://aaefewokgoofrkeotrkgokrosmgakrgr…..jpg
このような感じです。
順序としては、
クロスドメインの画像をbase64にエンコードをして埋め込みます！
$cors = base64_encode(file_get_contents(“画像のURL 例:http://derkewkfoekwo..jpg“));
そして、
Base64にエンコードされました。
次に初めの部分に
data:image/jpeg;base64,
これをくっつけます！！！
$cors = base64_encode(file_get_contents(“http://weekoekrfowkefo…jpg“));
$base64 =‘data:image/jpeg;base64,’.$cors;
これでJavascriptでCanvasに埋め込んでやればエラーなく
エクスポートできるようになります。
Javascriptサイドでは
<script>
var sample= new Image();
sample.src = “<?php print $bace64;?> “;
</script>
このような形で書いてあげましょう！
以上です！ありがとうございました。
コメント