一键下载图片

Question

我在通过 1 个按钮下载图像时遇到问题。现在我的情况是先按预览键再点击下载link就可以下载图片了。如何直接按下载link下载图片？

下面是我试过的示例编码：

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
  <strong>Testing</strong>
  <hr/>
  <h3 style="color: #3e4b51;">
    Html to canvas, and canvas to proper image
  </h3>
  <p style="color: #3e4b51;">
    <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net, C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, Web Design, Software</p>
  <p style="color: #3e4b51;">
    <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.
  </p>
</div>
<input id="btn-Preview-Image" type="button" value="Preview" />
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>

<div id="previewImage">
</div>
<script>
  $(document).ready(function() {
    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);
    });
  });
</script>

输出结果如下图：

希望有人能指导我如何去掉预览按钮然后直接点击下载link可以下载图片

工作 jsfiddle：https://jsfiddle.net/ason5861_cs/7c14gLxn/1/

Answer 1

我对您的下载功能做了一些改动，以便可以重复使用。

$("#btn-Convert-Html2Image").on('click', function () {
  const link = document.createElement('a');
  link.download = 'your_pic_name.png';
  link.href = getCanvas.toDataURL("image/png")
  link.click();
});

这样，您只需

就可以触发下载

$("#btn-Convert-Html2Image").trigger('click');

所以预览代码是

$('#btn-Preview-Image').on('click', function () {
  html2canvas(element, {
    onrendered: function (canvas) {
      $('#previewImage').append(canvas);
      getCanvas = canvas;

      $('#btn-Convert-Html2Image').trigger('click');
    }
  });
});

https://output.jsbin.com/gimumoq

一键下载图片

Download images via 1 button

html

canvas

download

html2canvas