在初始按钮单击时从 HTML 转换为 PNG 图像

Question

我正在将部分html元素转换为画布并将其转换为png图像。它工作正常，但问题是在第一次单击时它没有将 html 转换为 convas 并将画布转换为 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)
});

这是不是做错了什么。请参阅小提琴链接

Answer 1

首先单击时，您将pngdataURL 绑定到#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

好消息：你做对了一切！

最后一行代码说：将下载按钮的致敬设置为您的图像。很好，但要晚了。您已经单击了该按钮。因此，当您再次单击该按钮时，将下载上次运行的图像，并生成一个新图像并将其链接到该按钮。

您只需要在生成映像后强制下载即可。例如，通过强制下载 URI ...