Webkit JavaScriptは純粋なバイナリとしてイメージをREST形式でPUTまたはPOSTできますか？

Question

私のブラウザがWebサイトから画像をダウンロードすると、base64エンコーディングは必要ありません。 GET /image.jpgのようなHTTPコマンドを発行し、そのContent-Typeがimage/jpgのようなHTTP応答を受け取り、Content-Lengthが画像のバイト数であり、その本文が生のバイナリ画像データそのものであるHTTP応答を受信します。データは文字セットを使用してエンコードされず、base64のようなスキームを使用してエンコードされません。 RESTfulなリソースを書く

はHTTP GETとPUT間の対称性を期待する私を訓練したように、例えば、私はそれはPUTで提示されたときGETはその後、JSONデータを受け入れる行うときにJSONデータを配信するURL。いずれの場合もフォームエンコーディングは関係ありません。どちらの場合も、ペイロードにバイト数を与えるContent-Lengthがあり、Content-Typeヘッダーは、ペイロードが一部の文字セットでJSONであることを宣言してから、文字データは単独で、GETまたはPUTの本体として単独で座っています。

私は、ユーザーが写真を撮って自分のアプリケーションを使用してアップロードできるPhoneGapアプリケーションを作成しています。私は、対称型のGETとPUTをサポートするRESTfulインターフェイスを設計できると期待していたので、PUTコマンドには特別なエンコーディングが含まれていません。文字セットのアイデアはありません。Content-Typeがimage/jpgで、バイナリJPGデータをペイロードとして使用します。明らかに、これは、フォームの内部でイメージをエンコードしようとするよりも、帯域幅をより効率的に使用することです。 curlのようなツールを使用してURLにPUTを追加すると、このアプローチはうまくいきます。

しかし、私はPhoneGap WebKit JavaScriptからきれいなRESTful PUTを行うことに運がないです！ PhoneGapは、JavaScriptをローカルのfile: URL、またはdata:のURLとして返信します。このURLは、画像データをbase64エンコーディングのインラインで表示します。しかし、どちらの場合も、イメージを純粋なバイナリ形式に変換する明確な方法はありません（私は、これらの新機能のあるBlobオブジェクトを使用しますか？その場合はどうすればよいでしょうか）。そして、PUT余分なフォームやエンコードクラフトのレイヤーは、生のイメージをHTTPリクエストペイロードとしてWebサーバーに送信します。

WebKitをPUTに誘導する方法を知っている人は、生のイメージを本体としてAJAXリクエストをしていますか？私はこのすべてに間違っていると指摘しています。

Answer 1

バイナリ画像処理に関しては、Binary File Inspector demoがエンドツーエンドの例として役立つかもしれません。

ファイルシステムからBlobを取得する件名に関するチュートリアル情報がMDNです。 This blog postは、base64 URIをArrayBufferに変換してからBlobに変換する方法を説明しています。

最後にArrayBufferまたはBlobのいずれかをusing the XMLHttpRequest2 interfaceにアップロードできます。

The XHR2 spec seems to implyPUTが他のHTTPメソッドと共にサポートされています。これをすべて組み合わせると、Blobのファイルを作ってXHR2を使って送ることができます。

---

base64-binary.jsからいくつかの助けを借りてbase64でデコード方法を使用してテストされていないコードサンプル：言っ

var BASE_64_PREFIX = "base64,"; 
function getBase64Content(base64Uri) { 
    var index = base64Uri.indexOf(BASE_64_PREFIX); 
    return base64Uri.substring(index + BASE_64_PREFIX.length); 
} 

function put(uri, data, onComplete) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("PUT", uri, true); 
    xhr.onload = onComplete; 

    xhr.send(data); 
} 

var base64Uri = fromPhoneGap(); 
var base64Content = getBase64Content(base64Uri); 
var arrayBuffer = Base64Binary.decodeArrayBuffer(base64Content); 

put("/some/uri", arrayBuffer, function() { 
    console.log("All done"); 
}); 

---

に、私ははるかに少ない、これの多くも、最新のデスクトップのWebKit上で動作します疑いますあなたはPhoneGapを介して抱かれることになるでしょう。あなたはおそらく、これらのドラフト仕様を利用するための良い形ではありません。