html - 通过 1 个按钮下载图像

Question

我在通过 1 个按钮下载图像时遇到问题。现在我的情况是先按下预览按钮然后点击下载链接就可以下载图像了。怎么能直接按下载链接下载图片呢？

以下是我尝试过的示例编码：

<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>

输出结果如下图：

希望有人可以指导我如何删除预览按钮，只需单击下载链接即可下载图像。

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

标签： htmlcanvasdownloadhtml2canvas

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