1

HTML5キャンバスのコンテンツをpng画像に変換しようとしています。

問題は、キャンバスにローカルでホストされていない画像が含まれているため、セキュリティエラーが発生することです。

画像をローカルでホストするオプションがありませんが、canvas要素内にあるものをキャプチャする他の方法はありますか?

ありがとう!

4

3 に答える 3

2

画像リソースを 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 トリックがいくつかありますが、画像を提供するサーバーをある程度制御できることを前提としています。

于 2012-10-16T04:12:08.230 に答える
0

jQuery の使用に反対でない場合は、このプラグインを使用してください。

http://www.maxnov.com/getimagedata/

于 2012-10-16T00:13:25.693 に答える
0

クライアント側でそれを回避する方法はないと思います。そうでなければ、toDataURLとにかくブロックするポイントは何でしょうか?

外部画像をクライアントに転送するサーバー側スクリプトを作成して、ブラウザが別のドメインからのものであることを認識しないようにすることもできます。(サーバー側からブラウザの資格情報を使用できないため、とにかく必要というわけではありません)

画像の URL を get パラメーターとして送信し、画像ファイルに従って content-type ヘッダーを変更し、それらすべてのバイトを応答コンテンツに展開するだけです。

于 2012-10-16T01:31:43.907 に答える