4

私は画像マッシュアップウェブアプリに取り組んでいます。
フラッシュやその他のクライアントの煩わしさを避け、純粋なHTML+javascriptを実行したい。

軽くするために、Javascriptでクライアント側で作業を行い、最終的に保存された画像をサーバーにプッシュするようにします。

HTML5とCanvasの素晴らしさを読んだ後、それを使用できると思いました。

ただし、問題は次のとおりです。

  1. HTML5の新しいドラッグアンドドロップ機能を使用して、ユーザーがローカル画像をアプリに渡し、それをキャンバスにペイントすると、...
    キャンバスが汚れて、保存しようとするとセキュリティ例外がスローされます。画像データ。

  2. Bing Image searchなどのAPIを使用してユーザーの画像を検索し、それらをキャンバスにペイントすると、...
    キャンバスが汚れて、画像データを保存しようとするとセキュリティ例外がスローされます。

私が考えることができる唯一の回避策は、サーバーを一種のプロキシとして機能させ、処理されるすべてのイメージをクライアントに中継させることですが、それはクライアント側に行くという目的を損ないます。

私が考えていない他の方法はありますか、またはクライアント側の純粋なHTML5 + JSは、このユースケースのオプションではありませんか？

4

1 に答える 1

2

別のドメイン (この場合はローカルまたは Bing) の画像を使用しているため、セキュリティ例外がスローされます。選択した画像をサーバーにアップロードし、キャンバスで操作できるようにする必要があります。インターネット ストレージからの画像の場合、プロキシのようなものを作成してフロントエンドで表示できます。ユーザーの PC からの画像は常にアップロードする必要があります。私の知る限り、XSS 例外を回避する方法は他にありません。

PS HTML5 キャンバス イメージの制限に関する良い記事がここにあります: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

于 2012-08-12T10:15:40.827 に答える