HTML2Canvas 不工作，需要控制台图像 url答案

【问题标题】：HTML2Canvas not working, need to console image urlHTML2Canvas 不工作，需要控制台图像 url
【发布时间】：2021-03-11 03:40:52
【问题描述】：

我正在尝试截取包含 fullcalendar 的 div 视图，但无法截取。我试过以下代码：

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

每当我点击屏幕截图时，我都想捕获div#calendar 的图像，并且需要控制 url，以便我稍后在社交媒体上分享此页面链接时可以将此图像用作缩略图。

你可以在这里查看Codepen

【问题讨论】：

标签： jquery html2canvas

【解决方案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
        }
     });
 }

【讨论】：

【解决方案2】：

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

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

【讨论】：