Question

我想从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);
});

Answer 1

嗯..你必须从点击监听器中解开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/

Answer 2

（为动态html内容添加另一个答案）

我正在使用MutationObserver查看#content div中的更改以致电html2canvas并更新#download-link主播href

这是一个小提琴：https://jsfiddle.net/mvy361h6/12/你可以在div中输入内容来改变它的内容

HTML到图像 - 没有预览的画布

2 个答案: