javascript - 将画布数据上传到 s3

Question

现在自从亚马逊启用以来，CORS我想知道这是否可能。

htmlcanvas数据（在客户端浏览器上）可以转换为asomething并直接上传到s3吗？

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

我可以获得base64编码的图像数据，甚至是一个Blob但是有没有办法将它保存为S3来自客户端浏览器的图像？

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

Answer 1

这是一个工作示例，您从画布中获取数据 URL 并将其上传到 S3：

var dataUrl = canvas.toDataURL("image/jpeg");
var blobData = dataURItoBlob(dataUrl);
var params = {Key: "file_name", ContentType: "image/jpeg", Body: blobData};
bucket.upload(params, function (err, data) {});

dataURItoBlob：

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

Answer 2

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

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

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

而不是正常的POST，可以有一个带有表单数据的xhr请求到亚马逊，你就完成了

Answer 3

使用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 4

在我找到这篇文章之前，我一直在研究这个并没有太多运气：https ://github.com/aws/aws-sdk-js/issues/1712#issuecomment-329542614

AWS 有一个实用程序可以在他们的 aws-sdk 中解码 base64：AWS.util.base64.decode(image)

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

Answer 5

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

canvas.toDataURL();

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

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

还要看这个库：http ://www.nihilogic.dk/labs/canvas2image/