Webkit JavaScript PUT 또는 POST 이미지를 순수 바이너리로 REST 스타일로 변환 할 수 있습니까?

Question

웹 사이트에서 이미지를 다운로드 할 때 base64 인코딩이 필요하지 않습니다. GET /image.jpg과 같은 HTTP 명령을 실행하고 Content-Type이 image/jpg 인 HTTP 응답을받습니다.이 메시지의 Content-Length은 이미지의 바이트 수이고 본문은 원시 이진 이미지 데이터 자체입니다. 데이터는 문자 세트를 사용하여 인코딩되지 않으며 base64와 같은 스키마를 사용하여 인코딩되지도 않습니다. 편안하고 자원을 작성

는 HTTP GET 및 PUT 사이의 대칭을 기대하는 저를 훈련했다 그래서, 예를 들어, 나는 그것이 PUT 제시 될 때 GET 다음 JSON 데이터를 받아 수행 할 때 JSON 데이터를 제공하는 URL입니다. 어떤 경우에도 형식 인코딩이 관련되지 않습니다. 두 경우 모두 페이로드에 바이트 수를 제공하는 Content-Length, 페이로드가 일부 문자 집합에서 JSON 인 것으로 선언하는 Content-Type 헤더가있는 경우 문자 데이터는 GET 또는 PUT의 본문으로 단독으로 자리 매김되지 않습니다.

저는 사용자가 사진을 찍어 내 응용 프로그램을 사용하여 업로드 할 수있는 PhoneGap 응용 프로그램을 작성하고 있습니다. 나는 대칭적인 GET과 PUT을 지원하는 RESTful 인터페이스를 디자인 할 수 있기를 기대 했으므로 PUT 명령은 특별한 인코딩을 포함하지 않으며 문자 세트에 대한 아이디어도 포함하지 않고 단순히 Content-Type을 image/jpg으로 만든 다음 그 질량을 바이너리 JPG 데이터를 페이로드로 사용합니다. 분명히 이것은 폼 내부에서 이미지를 인코딩하는 것보다 대역폭을보다 효율적으로 사용하는 것입니다. curl과 같은 도구를 사용하여 URL에 PUT을 입력하면이 접근 방식을 사용할 수 있습니다.

그러나 PhoneGap WebKit JavaScript에서 깨끗한 RESTful PUT을 수행하는 데 운이 없다! PhoneGap은 자바 스크립트로 로컬 file: URL로 또는 이미지 데이터를 base64 인코딩 방식으로 인계하는 data: URL로 이미지를 반환하려고합니다. 그러나 어느 경우에도 이미지를 순수한 바이너리 형식으로 변환하는 명확한 방법을 찾을 수 있습니까? (그렇다면 어떻게 사용합니까?) 그 요청을 축하하지 않고 PUT이 발생합니다. 폼 또는 인코딩 cruft의 여분의 레이어는 HTTP 요청 페이로드로 와이어를 통해 웹 서버에 단순히 이미지를 전송합니다.

WebKit을 PUT으로 유도하는 방법을 아는 사람은 원시 이미지를 본문으로 사용하고 있습니까? 모든 포인터를 주셔서 감사합니다 - 또는이 모든 잘못된 접근 오전 효과에 대한 유용한 답변도!

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 imply 그 밖의 HTTP 메소드와 함께 PUT이 지원됩니다. 그래서이 모든 것을 결합하면 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"); 
}); 

---

, 나는이 많은도 최신 데스크톱 웹킷에 작동 의심 훨씬 적은 버전은 PhoneGap을 통해 안장됩니다. 이 초안 사양을 이용하기에 좋은 모양이 아닐 수도 있습니다.