將畫布圖像上傳到S3服務器

有人可以告訴我如何使用AWS JavaScript將圖像上傳到S3服務器？將畫布圖像上傳到S3服務器

我在使用JavaScript SDK的Amazon S3服務器上傳圖像時遇到了一些問題，需要實現以下幾點。

- >在HTML5畫布上創建圖像並在JavaScript中調整圖像大小。

- >然後將圖像上傳到Amazon S3服務器。

但問題：

*）當將圖像上載至S3服務器被上傳在S3上，而不是圖像的圖像的像素信息。

因此，在S3瀏覽器預覽中，它使用下面的代碼顯示圖像流而不是圖像。

此外，AWS Javascript支持以下格式的主體 Buffer，Typed Array，Blob，String，ReadableStream。

下面是代碼：

HTML代碼

<canvas id="myCanvas" width="800" height="800" style="background-color: greenyellow;">Your browser doesn't support html5! Please download the latest version. 
</canvas> 
<input type="button" id="upload-button" value="Upload to S3" /> 

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.4.min.js"></script> 



<script type="text/javascript"> 
     AWS.config.update({ accessKeyId: 'ACCESSKEY', secretAccessKey: 'SECRETKEY' }); 
     AWS.config.region = 'ap-southeast-1'; 

     $(function() { 

     $("#upload-button").click(OnUpload);  

     }); 

     function OnUpload(){ 

      var canvas = document.getElementById("myCanvas"); 
      var ctx = canvas.getContext("2d"); 

      var img = new Image(); 
      img.src = 'Images/IMG_0001.JPG'; 

      img.onload = function() { 
      <!--image resize --> 
      var MAX_WIDTH = 200; 
       var MAX_HEIGHT = 200; 
       var width = img.width; 
       var height = img.height; 

       if (width > height) { 
        if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH/width; 
         width = MAX_WIDTH; 
        } 
       } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
         height = MAX_HEIGHT; 
        } 
       } 
       canvas.width = width; 
       canvas.height = height; 
       ctx.drawImage(img, 0, 0, width, height); 

       <!--image resize end--> 

       var imageData = ctx.getImageData(0, 0, width, height); 
       var typedArray = imageData.data; 

       var bucket = new AWS.S3({ params: { Bucket: 'bucketName' } }); 
       var results = document.getElementById('results'); 
       results.innerHTML = ''; 
       var params = { Key: "sample.png", ContentType: "image/png", Body: typedArray }; 

       bucket.putObject(params, function (err, data) { 
        results.innerHTML = err ? 'ERROR!' : 'UPLOADED.'; 

       });     
      }   
     } 

</script>

可有人請告訴我如何做到這一點？在此先感謝...

來源

2014-07-11 Pradeep

得到它的工作，現在，終於來了！使用[http://stackoverflow.com/questions/12883871/how-to-upload-base64-encoded-image-data-to-s3-using-javascript-only] – Pradeep

上述代碼是上傳的最新/正確的代碼一個畫布如此S3？我自己有這個問題。 –

@Pradeep能不能請你分享你的文件是如何上傳aws s3 –

對於人們仍然面臨的問題，這將節省一些時間：

var canvas = document.getElementById("imagePreviewChatFooter"); 
        var dataUrl = canvas.toDataURL("image/jpeg"); 
        var blobData = dataURItoBlob(dataUrl); 
        var fileName = file.name; 
        var params = {Key: fileName, ContentType: file.type, Body: blobData}; 
        bucket.upload(params, function (err, data) { 
         console.log(data); 
         console.log(err ? 'ERROR!' : 'UPLOADED.'); 
        });

和

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
}

來源

2016-03-29 23:41:44

非常感謝！在找到您的帖子之前，我無法弄清楚這一點。 – seaBass

將畫布圖像上傳到S3服務器

回答

相關問題