Convert the html into image , and save it ?(use html2canvas.js)

Question

I have a big problem, please help me ! This is my code :

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>

  <script type="text/javascript">
    $(function() {
      $("#show_button").click(function() {
        html2canvas(document.body, {
          onrendered: function(canvas) {
            $("<img/>", {
              id: "image",
              src: canvas.toDataURL("image/png"),
              width: '95%',
              height: '95%'
            }).appendTo($("#show_img").empty());
          }
        });
      });
    });
  </script>
</head>

<body>
  <h1>test</h1>
  <button id="show_button">Show Image</button>

  //this is a problem
  <a href="" download="dl.jpg">download</a>
  <div id="show_img"></div>
</body>

</html>

If my viewpoint is correct . To save image,the download need the correct file path and file name. And i use the html2canvas.js , convert the target into image . But when i want to save the image , i don't know the correct file path and file name.(Because the image is dynamic file ,not a static file?) How can i get the correct value to save this image? Thank you!

See example freakyjolly.com/…

Code Spy
– Code Spy

2018-06-08 09:39:38 +00:00
Commented Jun 8, 2018 at 9:39 — Code Spy
– Code Spy, Commented Jun 8, 2018 at 9:39

Andrew Bone · Accepted Answer · 2015-12-04 16:09:14Z

4

OK, I've discovered canvas2image.js that does what you need with this function

downloadPNG = function () {
  html2canvas(document.body, {
    onrendered: function (canvas) {
      Canvas2Image.saveAsPNG(canvas);
    }
  });
}

Here is a fiddle

http://jsfiddle.net/link2twenty/w8Lk3znf/

answered Dec 4, 2015 at 16:09

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2452153 Over a year ago

Hi,thank your answer! It's very helpful in this question. But now i have a new small question. If use this website provide compiler,it will run success. But the download file doesn't have the filename extension,like ".png". Just have the name "download". (But i rename this file to "download.png,it can open.")

user2452153 Over a year ago

Then i run in local,it does't download anything. So i add " download='dl.png' " this code in <a> ,like <a href="" onclick="downloadPNG()" download="dl.png">download</a>. It will download,but it will download 2 file,one is "download" ,the other is "dl.png". And the "dl.png" is incorrect file that can't open it. How can i download the file ,and the file is correct(and i can use other name for rename the file name.)? We can solve this problem? Thank you!

Srikanth · Accepted Answer · 2016-05-18 05:54:34Z

1

Use html2canvas it will convert html to canvas and use canvas2image packages to convert canvas to image (or) you can pass canvas data .toDataURL("image/png");

example:

var imagename = '<YOUR_IMAGE_NAME>';
var link = event.target;
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png");
downloadImageFormat(link, canvasData, imagename);
function downloadImageFormat(link, canvasData, imagename) {
    link.href = canvasData;
    link.download = imagename;
}

Here is fiddle demo

edited May 18, 2016 at 5:54

answered May 18, 2016 at 5:44

Srikanth

213 bronze badges

Comments

Code Spy · Accepted Answer · 2018-06-08 09:40:27Z

1

Just Use html2canvas library just include plugin and call method to convert HTML to Canvas then download as image PNG

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

Source: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

answered Jun 8, 2018 at 9:40

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

Collectives™ on Stack Overflow

Convert the html into image , and save it ?(use html2canvas.js)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related