从 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

您可以通过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
  });