CODEWITHSUNDEEP
htmlcanvasdownloadhtml2canvas
user13193267
user13193267

Reputation:

Download images via 1 button

I have a problem to download images via 1 button. Now my situation is pressed the preview button first then click the download link just can download the images. How can direct pressed the download link to download the images?

Below is my tried the sample coding:

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

The output result like below the picture:

sample1

Hope someone can guide me how to remove the preview button and just click the download link can download the images.

Working jsfiddle: https://jsfiddle.net/ason5861_cs/7c14gLxn/1/

Upvotes: 1

Views: 257

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

I've changed your download function a bit so it can be reusable.

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

This way, you can trigger the download just by

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

So the preview code is

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

Upvotes: 1

Related Questions