将画布数据上传到S3

Question

将画布数据上传到S3

javascriptamazon-s3

21

现在亚马逊启用了 CORS，我想知道这是否可能。

客户端浏览器上的 canvas 数据能否直接转换为 某种格式 并上传到 S3 呢？

我确定我可以向亚马逊发起一个 PUT 请求，但是这需要一个 文件。

我可以获取 base64 编码的图像数据甚至是一个 Blob，但是有没有一种方法可以从客户端浏览器将其保存为图像并上传到 S3？

有没有一种将 canvas 转换为 文件 的方法，以便我可以发起 PUT 请求，或者亚马逊可以理解 Blob 并将其保存为图像？

- Gaurav Shah

1

这是可以做到的。在这里解释起来可能会比较长。但如果有人感兴趣，我可以写下来。 - Gaurav Shah

我很想知道您是如何将 dataURL 转换为亚马逊可识别的 blob 的。 - Raphael Rafatpanah

1

@RaphaelRafatpanah `function canvasToBase64(canvas_id) { var base64 = "" try{ base64 = document.getElementById(canvas_id).toDataURL('image/jpeg',0.8); } catch(e){ // 如果不支持jpeg转换，则回退 base64 = document.getElementById(canvas_id).toDataURL(); }

    // 移除格式类型
    base64 = base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
    return base64;
}`

- Gaurav Shah

5个回答

3

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

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

我使用了这个想法：将数据URI转换为文件，然后将其附加到FormData中

除了正常的POST，还可以使用带有FormData的xhr请求发送到Amazon，完成上传。

- Gaurav Shah

1

我一直在研究这个问题，但没有什么进展，直到我发现了这篇文章：https://github.com/aws/aws-sdk-js/issues/1712#issuecomment-329542614

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

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

- Dave Hilson

这是最好的答案。 - Travis

1

使用 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");

- Overcode

-3

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

canvas.toDataURL();

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

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

同时也关注这个库: http://www.nihilogic.dk/labs/canvas2image/

- Minty

OP已经说过他们可以获取Base64编码的数据（显然他们也知道atob函数）。 - katspaugh

我该如何处理 base64？我希望将其保存为 s3 上的文件。 - Gaurav Shah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rahil sharma · Accepted Answer

以下是一个可行的示例，您可以从画布中获取数据 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'});
}