我想从HTML创建图片。我找到了他们展示如何完成的网站:codepedia.info
是的,它有效。但您必须按“预览按钮”,然后按“下载链接”以保存图形。我希望用户只按一个按钮并直接下载图形而不预览。 其他用户也要求这样做,网站管理员解释说,这很容易,如下所示:
您只需将按钮代码复制到一个功能和注释中即可 这一行
$("#previewImage").append(canvas);
。
javascript有两个部分。不幸的是,我在javascript中无能为力,知道该怎么做而且不能让它运行。有人可以帮忙吗?
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
答案 0 :(得分:0)
嗯..你必须从点击监听器中解开html2canvas代码并删除预览按钮......
所以这......
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
......变成这个......
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
我假设要转换为canvas的html是静态的......
要删除预览,只需将style="display:none"
添加到预览元素
这是一个小提琴:https://jsfiddle.net/qm68d7hq/3/
答案 1 :(得分:0)
(为动态html内容添加另一个答案)
我正在使用MutationObserver查看#content
div中的更改以致电html2canvas
并更新#download-link
主播href
这是一个小提琴:https://jsfiddle.net/mvy361h6/12/你可以在div中输入内容来改变它的内容