Question

既然亚马逊已启用CORS，我想知道这是否可行。

html canvas数据（在客户端浏览器上）是否可以转换为something并直接上传到s3？

我确信我可以向亚马逊提出PUT请求，但这需要File。

我可以获得base64编码的图片数据，甚至是Blob，但有没有办法将此图片作为图片保存到S3客户端浏览器？

有没有办法将canvas转换为File，以便我可以发出PUT请求或亚马逊了解Blob并将其保存为图像的方式？

Answer 1

这对我有用：

 <script type="text/javascript" src="/wp-content/uploads/iframeresizer/iframeResizer.min.js"></script> 
 <script type="text/javascript">
      iFrameResize( { minHeight : 1000, log : true, InPageLinks : true,   
      initCallback: function() { scrollToOffset(1,1); }                                 
      } );
 </script>

AND

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

Answer 2

有一种旧的post方法可以将数据从浏览器上传到s3

http://s3.amazonaws.com/doc/s3-example-code/post/post_sample.html

然后我用了这个想法 Convert Data URI to File then append to FormData

而不是正常POST可以有一个xhr请求，其中包含formdata到亚马逊，你就完成了

Answer 3

我正在对此进行研究，直到发现以下帖子为止运气不佳：https://github.com/aws/aws-sdk-js/issues/1712#issuecomment-329542614

AWS有一个实用程序，可在其aws-sdk中解码base64：AWS.util.base64.decode（image）

简单的解决方案，对我有用。

Answer 4

使用toBlob：

canvas.toBlob((blob) => {
  if (blob === null) return;
  bucket.upload({
    Key: "where/the/file/goes.jpg"
    ContentType: "image/jpeg",
    Body: blob,
  }, (err, data) => {});
}, "image/jpeg");

Answer 5

保存画布的最简单方法是将其转换为base64：

canvas.toDataURL();

或者您可以通过参数设置图像类型：

canvas.toDataURL("image/png");
canvas.toDataURL("image/jpeg");
// etc

另请注意此lib：http://www.nihilogic.dk/labs/canvas2image/

将画布数据上传到s3

5 个答案: