ファイル入力を介して画像を選択すると、選択した画像ファイルが window.url.createobjecturl に変換され、非表示の「img」要素に変更されずに渡されます。次に、画像要素の現在のデータのプレビューが canvas 要素にレンダリングされます。 . ここまでは順調ですね。しかし、canvas.toDataURL をレンダリングしようとすると、安全でないという深刻なセキュリティ例外が発生し続けます。これはクロムとファイアフォックスで発生します。
これは html の INPUT 要素で選択されたファイル OBJECT であり、「file://」URL 経由ではなく、Web ページは実際の Web ページであり、「http://」経由ではなく「http://」経由でロードされることを理解してください。ファイル：//"。
画像ファイルはまだサーバーに送られる前にブラウザから出ていないので、ドメインの問題は発生しないはずです。画像のソースとしてアサートされている生のブロブに過ぎず、プレビューを更新するようにキャンバスに指示し、それを実行します。その後、キャンバスの内容を保存しようとすると、ブラウザでエラーが発生します。
キャンバス要素が汚染されるシナリオに関するすべての仕様を読みましたが、このシナリオはこれらのシナリオのいずれにも適合しません。
同じことを行う方法を人々に示すためにコードスニペットを提供しているモジラのデモで同様の例を見たことがありますが、誰かがそれに問題を抱えているかどうかは見ていません.
何か案は？ティア
#
===更新===
#
わかりました、私は問題が何であるかを理解しましたが、なぜそれが問題なのかはまだはっきりしていません. セットアップは次のとおりです。
1) ページは、たとえば「example.com/」を介して呼び出されます。
2) スクリプトは「r.example.com/script.js」経由で呼び出されます
3) スクリプトが "r.example.com" から画像を読み込み、キャンバスではなくページ デザインに使用すると、ページ全体が何らかの形で汚染されます。この場合、JavaScript を使用してページ全体を描画するため、ヘッダー画像がページの残りの部分を汚しています。ヘッダー画像を「r.example.com」ではなく「example.com」に変更すると、キャンバスが安全ではないという問題がなくなり、すべて問題ありません。
私が理解していないのは、なぜこれが起こっているのかです。ヘッダー画像はjavascriptファイルと同じ場所からロードされており、引数のために、メインドメインとサブドメインの両方でaccess-control-allow-originを「*」に設定しています。違い。
したがって、アクセス制御はどこからでも許可され、ヘッダー画像は JavaScript ファイルと同じ場所から来ており、キャンバス (ユーザー ファイル) に描画されていないため、JavaScript を介してヘッダー画像を描画すると、関係ないキャンバス？？？また、css とその他のメディアは同じサブドメインから読み込まれますが、スクリプトがそれらを読み込まない限り、ページには影響しません [o_0]。
スケーラビリティのためにすべてのリソースを別のサブドメインに保持したいのですが、なぜまだ起こっているのかよくわからないので、この問題はイライラしています...