Question

我试图像这样由html2canvas生成的图像链接：

App.js：

function capture() { 
  console.log('capture running')
  html2canvas(document.getElementById('leaderboard-div'), {
    letterRendering: 1, allowTaint: true, onrendered: function (canvas) {
      document.body.appendChild(canvas);
      console.log(canvas.toDataURL("image/jpeg"))   
    }
  }) 
}

Leaderboard.html-

<body> 
  <script type="text/javascript" src="node_modules/html2canvas/dist/html2canvas.js"></script>
  <script src="./app.js"></script>       

  <div id="leaderboard-div" style="height: 450px; width: 750px; background-color: #202124; border-radius: 24px;">
    <div id="rank-1" style="background-color: #2d2e31; height: 140px; width: 100%;">
      <img id="rank-1-pic" class="top-rank-image" 
        src="someURL">
      <p id="rank-1-name" style="color: #ffffff; font-family: 'Courier New', Courier, monospace;">Name</p>
    </div>
  </div>
  <button id="btnCap" onclick="capture()">Test</button>

</body>

这是控制台显示的内容：

function(canvas)中没有任何内容。

我需要在控制台或变量中获取该链接，以便可以将图像导出到某处...

Answer 1

我认为我已经找到解决您问题的方法。查看代码，似乎您已遵循了使用旧api的过时教程。 onrendered不再起作用。如今，html2canvas使用了诺言。这基本上意味着您必须在.then之后添加html2canvas(document.getElementById('leaderboard-div'), { letterRendering: 1, allowTaint: true,})。像这样：

function capture() {
  console.log('capture running')
  html2canvas(document.getElementById('leaderboard-div'), {
    letterRendering: 1,
    allowTaint: true,
  }).then(canvas => {
    document.body.appendChild(canvas);
    console.log(canvas.toDataURL("image/jpeg"))
  });
}

但是请注意跨原点图像。这可能会给您一个错误，例如：

未处理的承诺被拒绝：SecurityError：操作不安全。

或

file.html：未捕获（承诺）DOMException：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布。

有关更多信息，请参见github repo

希望这会有所帮助！如果没有，请发表评论

渲染完成后html2canvas停止

1 个答案: