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

时间:2018-04-20 20:02:37

标签: javascript html canvas

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

2 个答案:

答案 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中输入内容来改变它的内容