Amazon S3에 base64 이미지 데이터 업로드

좋아,이 phonegap 앱에서 나는 장치의 카메라에서 거대한 이미지 파일로 시작합니다.
그런 다음 해상도를 줄이고 사용자가 javascript 캔버스와 darkroomJS라는 매우 멋진 코드를 사용하여 자르기를 허용합니다. darkroomJS는 toDataURL() 메서드를 사용하여 base64 데이터를 캔버스 밖으로 가져옵니다.Amazon S3에 base64 이미지 데이터 업로드

이제 Amazon S3에 업로드해야합니다.

형식을 사용하여 내 컴퓨터에서 S3로 파일을 업로드 할 수 있습니다. 내가하고있는 일은 base64 데이터를 보내는 것입니다.

또한 base64 데이터를 blob로 변환하는 기능이 있습니다. (필자가 읽어야 할 것이지만, 다른 아이디어에 대해서는 개방적이다).

<form action="https://mybucketname.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> 
     <input type="" id="key" name="key" value="uploads/${filename}"> 
     <input type="" id="AWSAccessKeyId" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
     <input type="" id="acl" name="acl" value="private"> 
     <!-- <input type="" id="success_action_redirect" name="success_action_redirect" value="http://localhost/"> --> 
     <input type="" id="policy" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED"> 
     <input type="" id="signature" name="signature" value="YOUR_CALCULATED_SIGNATURE"> 
     <input type="" id="Content-Type" name="Content-Type" value="image/jpeg"> 
<!--  <input id="file" name="file" > --> 
     <br> 
     <input type="submit" value="Upload File to S3"> 
    </form>

내 서버에서 jquery를 사용하여 자격 증명을 작성합니다. 그 부분은 잘 작동합니다.

문제는 양식에 얼룩 (blob)을 넣는 것입니다.

두 가지 방법을 시도했습니다. jQuery로 값 설정.

$ page.find ("# file"). attr ('value', blobData); // 매우 유용하지 S3에 문자열 [객체의 Blob] 필드에 텍스트와 선박을, 삽입

또한 내가 시도했다 :

 var fd = new FormData(document.forms[0]); 
     fd.append('file', blobData);

// 영향을주지 않습니다; 그런 다음 S3는 파일을 기다리고 있다고 불평하지만 하나도 얻지 못했습니다.

내가 뭘 잘못하고 있니? 이 작품을 어떻게 만들 수 있습니까? 좀 블롭 캐릭터 라인 화하는 브라우저를 강제로

실제로 페이지에 렌더링 된 형태를 갖는 같아요 : 좋아

출처

2014-05-09 zstew

는 작동 뭔가있어.
는 함수 s3Man.getS3Policy는 등 서명 S3 정책, 키,

this.uploadBase64ImgToS3 = function(base64Data, filename, callback){ 
    var xmlhttp = new XMLHttpRequest();  
    var blobData = dataURItoBlob(base64Data); 
    var contentType = false; 
    if (filename.match(/.png/)) var contentType = 'image/png'; 
    if (filename.match(/.jpg/)) contentType = 'image/jpeg'; 
    if (!contentType){ 
     xStat.rec("content type not determined, use suffix .png or .jpg"); 
     return; 
    } 

    s3Man.getS3Policy(filename, function(s3Pkg){ 
     console.log("policy:", s3Pkg); 
     var fd = new FormData();  
     fd.append('key', s3Pkg.filename);  
     fd.append('acl', 'public-read');  
     fd.append('Content-Type', contentType);  
     fd.append('AWSAccessKeyId', s3Pkg.awsKey);  
     fd.append('policy', s3Pkg.policy); 
     fd.append('signature', s3Pkg.signature);  
     fd.append("file", blobData); 
     xmlhttp.open('POST', 'https://swoopuploadspublic.s3.amazonaws.com/', true);  
     xmlhttp.send(fd); 
    }); 
}

을 얻기 위해 내 단절에 AJAX 요청을한다

출처

2014-05-09 18:02:45 zstew

Amazon S3에 base64 이미지 데이터 업로드

답변

관련 문제