CanvasのCORS制限をPHPを使って解決!外部サイトの画像

 
みなさんこんにちは!
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>

このような形で書いてあげましょう!
以上です!ありがとうございました。

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました