html2canvas图像未保存

时间:2020-05-17 11:25:35

标签: javascript html2canvas

我正在使用html2canvas来捕获div的屏幕截图并将其保存...但是并没有保存。

function captureDiv() {
  const div = document.getElementById('myDiv');
  html2canvas(div, {
    scale: 2,
    onrendered: (canvas) => {
      let link = document.createElement('a');
      link.setAttribute('download', 'screenshot.png');
      link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
      link.click();
    }
  });
}
div {
  width: 60px;
  height: 50px;
  text-align: center;
  border: 1px solid;
  line-height: 3;
}
<div> HI </div>
<button onclick="captureDiv()">Capture</button>

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

1 个答案:

答案 0 :(得分:1)

您需要致电then。正如他们在this thread中所说的那样,它取代了onrederer。就像这样:

function captureDiv() {
  const div = document.getElementById('myDiv');

  html2canvas(div, {scale: 2}).then(canvas =>  {
    let link = document.createElement('a');
    link.setAttribute('download', 'screenshot.png');
    link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    link.click();
  });
}
相关问题