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

 この記事は約2分で読めます。
 
みなさんこんにちは!
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>

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


 

       
   
コメントはまだありません

コメントを残す

JavaScript
html2canvasでfont-sizeが変わらないときの対処法!

こんにちは、はせです。 html2canvasとは簡単に 要素を画像に変換してくれるJSライブラリで …

JavaScript
jQueryで「自身の要素」のみイベントを起こす方法。親子の要素にも影響しない。

こんにちは、長谷川です。 今回は、要素に対してクリックなどのイベントを 親要素や子要素を無視し、その …

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …