Question

我正在尝试对包含全日历的div的视图进行屏幕截图，但无法这样做。我尝试了以下代码：

  function screenshot(){
     alert('zz'); html2canvas(document.querySelector('#calendar')).then(function(canvas) {
        document.body.appendChild(canvas);
        console.log(canvas.toDataURL());
     });
    }

每当我单击屏幕快照时，我都想捕获div#calendar的图像并需要控制URL，以便以后在社交媒体中共享此页面链接时可以将该图像用作缩略图。

您可以在Codepen上查看它

Answer 1

您可以使用下面的函数使用html2canvas获取图像。

function screenshot(){
      console.log(html2canvas(document.querySelector('#calendar')))
      html2canvas(document.querySelector('#calendar'), {
      onrendered: function(canvas) {  
        var image = canvas.toDataURL("image/png");
        console.log("image => ",image); //image in base64
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml); //you can append image tag anywhere
        }
     });
 }

Answer 2

代码运行良好，只需按照Ravi的建议将base64添加到img标签的src即可。如果将console.log中生成的base64粘贴到base64转图片工具中，就会看到图片正在渲染中。

删除“data:image/png;base64”部分，然后将剩下的base64代码粘贴到某个在线工具（如https://www.ipvoid.com/base64-to-png/）中，然后提交表单以查看生成的图像。

HTML2Canvas无法正常工作，需要控制台图片网址

2 个答案: