5

重複の可能性:
画像オブジェクトをバイナリ BLOB に変換する方法

リモート イメージをロードするときに、同一オリジン ポリシーの制限に直面しています。<img />ただし、DOM 0 Image オブジェクトを使用してリモート リソースを読み込むことができます (これは基本的にタグを作成することと同じです)。

var fr = new FileReader(),
    img = new Image();

img.src = 'http://distilleryimage8.s3.amazonaws.com/6cf25568491a11e2af8422000a9e28e9_7.jpg';

img.onload = function () {
    // how to get this image as a Blob object?
};

このリソースを Blob/arraybuffer オブジェクトに読み込む方法はありますか? これは、イメージ オブジェクトをバイナリ BLOB に変換する方法の複製ではありません。

4

1 に答える 1

2

私の意見では、それはそれほど苦痛なしに達成することができます...

必要なHTML5要素はもう1つだけです。使用するときcanvasは、その上にリモートイメージを描くことができます。その後、画像dataUrlを取得するのは非常に簡単で、キャンバスのAPIからそのような関数を使用できます。次のステップは、FileReaderのreadAsDataURLメソッドを使用することです。

私はそれを試していませんが、理論的にはうまくいくはずです。

  • 編集：それは動作しません。画像が異なる原点からのものである場合、canvasのtoDataURL方法を使用することはできません。したがって、サーバー側がなければ解決策はないと思います。
于 2012-12-18T16:51:47.020 に答える