从 html2canvas 打开 base64 图像答案

【问题标题】：Opening base64 image from html2canvas从 html2canvas 打开 base64 图像
【发布时间】：2020-03-04 07:24:06
【问题描述】：

我正在尝试实际查看 html2canvas 正在呈现的字符串图像。我有一个从超链接打开的网页。我想最后使用图像按钮来截取网页的屏幕截图。我正在获取 base64 字符串，但如何查看字符串图像？

      $(document).ready(function(){         

      html2canvas(document.body,{
          onrendered: function (canvas){
              var data = canvas.toDataURL();
              alert(data);
          },
          width:300,
          height:300
      });

【问题讨论】：

您想如何查看它？在新标签中？你想下载吗？您希望看到的最终结果是什么？
我希望它是一个下载

标签： javascript html screenshot html2canvas

【解决方案1】：

您可以通过将 data:image/png;base64, 之类的内容附加到 base64 字符串，并将其用作插入某处的图像标签的来源：

  html2canvas(document.body,{
      onrendered: function (canvas){
          var data = canvas.toDataURL();
          var img  = document.createElement('img');
          img.setAttribute('download','myImage.png');
          img.src  = 'data:image/png;base64,' + data;
          document.body.appendChild(img);
      },
      width:300,
      height:300
  });

【讨论】：

我仍然没有让它工作。我放了一个警告框来查看正在渲染的内容，它仍然只是 base64 字符串。有什么建议吗？

【解决方案2】：

使用来自@adeneo 的答案，而不是：

img.src  = 'data:image/png;base64,' + data;

试试这个：

img.src  = data;

因为数据图像前缀已经在数据变量中。

【讨论】：