javascript - 从 html2canvas 打开 base64 图像

Question

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

      $(document).ready(function(){         

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

Answer 1

为此，您可以在 base64 字符串中附加类似data:image/png;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
  });

Answer 2

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

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

尝试这个：

img.src  = data;

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