将画布图像上传到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服务器

回答

相关问题