Question

我正在尝试在SPA中使用html2canvas捕获一些HTML，以便在人们共享链接时可以显示Twitter卡的预览图像。

要启用此功能，请先将捕获的图片上传到S3，然后根据twitter-cards格式呈现带有meta标签的静态html页面。

当前，图像在上传到S3后似乎已损坏，我不知道为什么。这是我创建png的前端代码。

html2canvas(document.querySelector("#" + imageHtmlId)).then(function(canvas) {
  var ranges = [...that.state.ranges];

  // insert the thumbnail at the top of the page

  document.body.appendChild(canvas);
  document.body.removeChild(imageHtml);
  ranges[0].pic = canvas.toDataURL("image/png", 0.1).replace("image/png", "image/octet-stream");

  that.setState({
    ranges: ranges
  });
  return API.put("hands", `/hands/${that.props.match.params.handId}`, {
    body: that.state.ranges
  });
})

然后，一旦用户希望共享页面，我将保存的图像上传到s3存储桶。

createShareLink() {
    try {
     s3Upload(this.state.pic, this.state.id);
    } catch (e) {
      alert(e);
      this.setState({ isLoading: false });
    }
  }

其中s3Upload函数定义为：

import { Storage } from "aws-amplify";

export async function s3Upload(file, filename) {
   const stored = await Storage.put(filename, file, {
    contentType: file.type
   });

   return stored.key;
}

现在，如果我从s3存储桶中手动或以编程方式下载映像，则OS X会告诉我该映像格式错误。显然，我事先对此主题做了一些研究。我发现了这个stackoverflow主题How To Save Canvas As An Image With canvas.toDataURL()?，它描述了如何下载在前端创建的图像。

当我使用答案之一中提供的代码时，我的图像将被下载并显示而没有任何错误。

 var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', 
canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

我尝试使用不同的toDataUrl参数将文件格式添加到文件名中，以缩小图像尺寸并重新定义我的无服务器存储桶。

感谢您的帮助。

canvas2html图像上传到无服务器S3会生成格式错误的png

0 个答案: