上传从 html 转换为 s3 的图像文件

Question

我有一张 HTML，我使用 html-to-image 将其转换为图像，现在我需要将该图像文件上传到 s3。

转换后得到的是base 64url。我在远程后端设置了 s3，我将文件发送到 api 路由并将其上传到 s3 和 returns 文件的 s3 url。

如何将此基础 url 转换为图像对象并将其发送到 api？

将 html 转换为 img 的函数：

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

Answer 1

有一个非常简单的通用函数可以将图像数据 url 转换为定义如下的文件对象：

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

上传从 html 转换为 s3 的图像文件

upload image file converted from html to s3

blob

amazon-s3

reactjs