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

Question

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

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

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

您可以在 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 不工作，需要控制台图像 url

HTML2Canvas not working, need to console image url

jquery

html2canvas