javascript - 在初始按钮单击时从 html 图像转换为 png 图像

Question

我正在将部分 html 元素转换为 canvas 并将其转换为 png 图像。它工作正常，但问题是第一次单击时它没有将 html 转换为 convas 并将 canvas 转换为 png。//点击按钮时HTML到图像

$("#btn-Convert-Html2Image").on('click', function () {
html2canvas(element, {
  onrendered: function (canvas) {
    getCanvas = canvas;
  }
});
setTimeout(function() {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
},400)

    });

是不是做错了什么。请参阅fiddle link

Answer 1

第一次单击时，您将 png dataURL 绑定(bind)到 #btn-Convert-Html2Image anchor ，当您第二次单击此链接时，已经下载了绑定(bind)的数据，您可以使用这种方法可以克服这个问题。

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}


$("#btn-Convert-Html2Image").on('click', function () {
  html2canvas(element, {
    onrendered: function (canvas) {
      var imgageData = canvas.toDataURL("image/png");
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
      downloadURI(newData,"your_pic_name.png");
    }
  });
});

JSFiddle link