HTML5キャンバスのコンテンツをpng画像に変換しようとしています。
問題は、キャンバスにローカルでホストされていない画像が含まれているため、セキュリティエラーが発生することです。
画像をローカルでホストするオプションがありませんが、canvas要素内にあるものをキャプチャする他の方法はありますか?
ありがとう!
HTML5キャンバスのコンテンツをpng画像に変換しようとしています。
問題は、キャンバスにローカルでホストされていない画像が含まれているため、セキュリティエラーが発生することです。
画像をローカルでホストするオプションがありませんが、canvas要素内にあるものをキャプチャする他の方法はありますか?
ありがとう!
画像リソースを CORS フレンドリーにできない限り、できません。
https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F
キャンバスで CORS 承認なしで画像を使用することはできますが、そうするとキャンバスが汚染されます。キャンバスが汚染されると、キャンバスからデータを引き出すことはできなくなります。たとえば、キャンバスの toBlob()、toDataURL()、または getImageData() メソッドを使用できなくなりました。これを行うと、セキュリティ エラーがスローされます。
編集: もちろん、純粋な HTML5 メソッドに限定されていない場合は、使用できる Flash/Crossdomain.xml トリックがいくつかありますが、画像を提供するサーバーをある程度制御できることを前提としています。
jQuery の使用に反対でない場合は、このプラグインを使用してください。
クライアント側でそれを回避する方法はないと思います。そうでなければ、toDataURL
とにかくブロックするポイントは何でしょうか?
外部画像をクライアントに転送するサーバー側スクリプトを作成して、ブラウザが別のドメインからのものであることを認識しないようにすることもできます。(サーバー側からブラウザの資格情報を使用できないため、とにかく必要というわけではありません)
画像の URL を get パラメーターとして送信し、画像ファイルに従って content-type ヘッダーを変更し、それらすべてのバイトを応答コンテンツに展開するだけです。