upload image file converted from html to s3

Question

I have a piece of HTML which I converted into an image using html-to-image and now I need to upload that image file to s3.

What I get after conversion is base 64 url. I have my s3 setup on remote backend where I send files to the api route and it uploads it to s3 and returns the s3 url for the file.

How can I convert this base url to image obj and send it to the api?

Function to convert html to img:

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    // do stuff with url
});

Check it out. stackoverflow.com/a/21227124/8546128

Anh Nhat Tran
– Anh Nhat Tran

2020-12-13 11:37:29 +00:00
Commented Dec 13, 2020 at 11:37 — Anh Nhat Tran
– Anh Nhat Tran, Commented Dec 13, 2020 at 11:37

tmhao2005 · Accepted Answer · 2020-12-13 11:49:30Z

2

There is a pretty simple common function which converts image data url to a file object defined as following:

function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type:mime });
}

// Usage in your case

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    const yourFile = dataURLtoFile(dataUrl, 'yourImageName');   
  });

answered Dec 13, 2020 at 11:49

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surya Mahla Over a year ago

Works like a charm! Thank you very much.

Collectives™ on Stack Overflow

upload image file converted from html to s3

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related