upload canvas data to s3

Question

Now since the amazon has enabled CORS I was wondering if this is possible.

Can the html canvas data (on client browser) be converted to a <

Answer 1

There is an old post method to upload data from browser to s3

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

then I have used this idea Convert Data URI to File then append to FormData

and instead of normal POST there can be an xhr request with the formdata to amazon and you are done

Answer 2

Using 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 3

The easiest way to save canvas is to convert it to base64:

canvas.toDataURL();

or you can set image type via argument:

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

Also watch this lib: http://www.nihilogic.dk/labs/canvas2image/

Answer 4

Here is a working example where you take a data URL from a canvas and upload it to 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 5

I was researching this and not having much luck until I found this post: https://github.com/aws/aws-sdk-js/issues/1712#issuecomment-329542614

AWS has a utility that will decode base64 in their aws-sdk: AWS.util.base64.decode(image)

Simple solution, and worked for me.