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

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