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绑定到#btn-Convert-Html2Image锚点，当您第二次点击此链接时，已下载绑定数据，您可以使用此方法来解决此问题。

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

Answer 2

好消息：你做得好！

最后一行代码说明：将下载按钮的属性设置为图像。很好但是迟到了。您已经点击了该按钮。因此，如果您再次单击该按钮，将下载上次运行的图像，并生成一个新图像并链接到该按钮。

您只需强制下载 AFTER 即可生成图片。例如，通过强制URI下载...

在初始按钮点击时从html转换为png图像

2 个答案: