将画布数据上传到s3

Question

现在,亚马逊已经启用,CORS我想知道这是否可行.

可以将html canvas数据(在客户端浏览器上)转换为a something并直接上传到s3吗？

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

我可以获得base64编码的图像数据,甚至Blob可以S3从客户端浏览器中将其保存为图像？

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

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

Answer 2

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

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

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

与正常情况不同的是POST，可以向亚马逊发送带有表单数据的 xhr 请求，然后就完成了