将画布图像上传到S3服务器

Question

请问有人能够展示如何使用AWS JavaScript将画布图像上传到S3服务器吗？

我在使用JavaScript SDK上传图像至Amazon S3服务器时遇到了一些问题，需要实现以下步骤：

-> 在HTML5画布上创建图像并在JavaScript中调整图像大小。

-> 然后将图像上传至Amazon S3服务器。

但问题是：

*) 当将图像上传至S3服务器时，它会上传像素信息而非图像。

因此，在预览S3浏览器时，使用以下代码会显示图像流而非图像。

此外，AWS Javascript支持以下格式的Body： 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>

这怎么做呢？

- Pradeep

---

现在搞定了，终于！使用[https://dev59.com/Imcs5IYBdhLWcg3wYzL6]。 - Pradeep

以上的代码是上传画布到S3的最新/正确代码吗？我自己尝试做这个有问题。 - Alex Saidani

@Pradeep，您能分享一下您是如何将文件上传到AWS S3的吗？ - Swapnil Dhotre

Answer 1

对于仍然遇到问题的人，这将节省一些时间：

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'});
}

- rahil sharma

---

非常感谢您！在找到您的帖子之前，我无法解决这个问题。 - seaBass

太棒了。让生活变得轻松。StackOverflow通用Base 64编码信息 - benjaminadk

对于那些想要了解背景的人，Rahil在这里使用的dataURItoBlob函数来自于这个答案：https://dev59.com/oW445IYBdhLWcg3wLXMK#11954337 - kingliam

太好了！谢谢。 - sambecker

Answer 2

@Rahil Sharma的答案非常好，使用辅助函数在某些方面更好。Canvas API实际上有一个内置的toBlob方法，您可以在canvas元素上调用它。我尝试使用async await但出现错误，不确定但我猜必须使用回调函数。签名是：

canvas.toBlob(callback, mimeType, quality)

回调函数接收blob，mimeType和quality是可选项，其中mimeType默认为image/png

因此，我的通用版本实现如下：

canvas.toBlob(blob => upload(blob), 'image/jpeg', 1.0)

MDN文档

- benjaminadk