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

Posted 2023-04-14

【中文标题】将画布图像上传到 S3 服务器

【英文标题】：upload canvas image to S3 server

【发布时间】：2014-09-01 21:30:16

【问题描述】：

有人可以告诉我如何使用 AWS javascript 吗？

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

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

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

但问题是：

*) 在将图像上传到 S3 服务器时，它会将图像像素信息上传到 S3 而不是图像。

因此，在 S3 浏览器预览中，使用以下代码时显示的是图像流而不是图像。

此外，AWS Javascript 支持以下格式的正文 缓冲区、类型化数组、Blob、字符串、ReadableStream。

下面是代码：

HTML 代码

<canvas id="myCanvas"   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>

有人可以告诉我如何做到这一点吗？ 提前谢谢...

【问题讨论】：

现在终于可以使用了！使用 [***.com/questions/12883871/…

上面的代码是上传画布的最新/正确代码，所以 S3？我自己在执行此操作时遇到问题。

@Pradeep 您能否分享一下您的文件是如何上传 aws s3 的

【参考方案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');

【讨论】：

非常感谢！在找到您的帖子之前，我无法弄清楚这一点。

太棒了。让生活变得轻松。 *** General Base 64 Encoding Info

对于那些想要一些上下文的人来说，这里使用的dataURItoBlob 函数 Rahil 来自这个答案：***.com/a/11954337/1055838

这太棒了！谢谢。

【参考方案2】：

@Rahil Sharmas 的回答效果很好，在某些方面，使用辅助函数更好。 canvas api 实际上有一个内置的toBlob 方法，您可以在canvas 元素上调用该方法。我尝试将它与异步等待一起使用，但出现错误，不是 100% 肯定，但我想你必须使用回调。签名是：

canvas.toBlob(callback, mimeType, quality)

回调接收 blob，mimeType 和 quality 是选项，mimeType 默认为image/png

所以我的实现的通用版本是：

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

MDN Docs