クロスサイト<img/>タグのデータをブロブとして取得できますか？

Question

ウェブページからオフラインストレージにリンクされている画像を2つ保存しようとしています。私は、Firefox上でIndexedDBを、Chrome上でFileSystem APIを使用しています。私のコードは実際には拡張機能なので、FirefoxではGreasemonkeyとChromeでコンテンツスクリプトとして実行しています。私はこれを自動化したい。

イメージファイルを取得するときに問題が発生しています。私はStoring images and files in IndexedDBというタイトルのサンプルコードを使用していますが、エラーが発生します。ダウンロードしようとしている画像が別のサブドメインにあり、XHRが失敗します。

XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin. 

私はおそらくGM_xmlhttpRequestを使用することができ、それは（私が同一生成元のURLにいる時にコードが両方のブラウザ上で動作します）動作すると思いますが、私はまだ、Chromeの問題を解決する必要があるのFirefox上のどの中他の制約（つまり、ホストページのフレームとやり取りする必要がある）では、スクリプトをページに組み込んで自分の特権を失う必要があります。

私は、IndexedDBやFileSystem APIにページにリンクされている（そしてそこに表示されるかもしれない）イメージを保存する方法を見つけようとしていることに戻ります。 Chromeのクロスオリジンの問題を解決する方法を理解する必要があります（また、特権が必要な場合は、jQueryとやりとりする方法を修正する必要があります）。逆の場合はcreateObjectURLとなります。最後に、IndexedDB（Firefox）に入れたり、FileSystem API（Chrome）に書き込むためにブロブ（Fileオブジェクト、私が理解する限り）が必要です

ヘルプ、誰ですか？

---

編集：私の質問は実際には本当に私はChromeで私のコンテンツスクリプトの権限を失うことなく、jQueryの私が望むように使用することができますどのように降りてくることがあります。私がすれば、I could use cross-origin XHRs on Chromeも同様です。私はむしろ、それに頼らない解決策を得たいと思っています。具体的には、スクリプトをWebページに組み込み、コンテンツスクリプト/ userscriptにする必要がない場合は、このソリューションを希望します。

---

編集：私は質問がのみについてクロスサイトはを要求していることに気づきました。今私は、@ chris-sobolewski、thesequestionsとthis fiddleで見ることができるいくつかの他のページ（thisのような）の助けを借りて、画像ブロブを得る3つの方法のうちの1つを持っています。しかし、これらのすべてには、実行するために特別な権限が必要です。悲しいかな、私はa known defect in Chromeのためにフレームがあるページを実行しているので、フレームにアクセスできません。だから私はall_frames: trueを使って各フレームにスクリプトを読み込むことができますが、実際にはすべてのフレームロードでスクリプトを読み込まないようにしたいと思っています。さもなければ、according to this article、私はサンドボックスをエスケープする必要がありますが、その後は特権に戻ります。

Answer 1

あなたはChromeとFirefoxで動作しているので、あなたの答えは幸いです（はい）です。

function base64img(i){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = i.width; 
    canvas.height = i.height; 
    var context = canvas.getContext("2d"); 
    context.drawImage(i, 0, 0); 
    var blob = canvas.toDataURL("image/png"); 
    return blob.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

これは、base64でエンコードされた画像を返します。

そこからあなただけのこれらの線に沿って何かの関数を呼び出す：先に行くとimgBlobを保存すると

image = document.getElementById('foo') 
imgBlob = base64img(image); 

。

編集：ファイルサイズが問題であるため、データを幅*高さ* 4バイトのcanvasPixelArrayとして保存することもできます。

imageArray = context.getImageData(0, 0 ,context.canvas.width,canvasContext.canvas.height); 

次に、配列をJSON化して保存しますか？