通过1个按钮下载图像

debugcn 发表于 Dev

用户名

我有一个通过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/

莫什·费

我对您的下载功能进行了一些更改，以便可以重用。

$("#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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。