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

javascript jquery html canvas html2canvas

27,949

Solution 1

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/

Solution 2

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

Solution 3

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/

27,949

Author by

user2452153

Updated on June 08, 2020

Comments

user2452153 almost 4 years

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!