Download Image Using HTML2Canvas

Question

I am having trouble downloading an image of a website. I am using html2canvas from: https://github.com/niklasvh/html2canvas and standard HTML, CSS, and javascript to add to the website. I attempted to use the standard HTML code for downloads ( link text) but it doesn't seem to work for what I was trying to do. I also tried the suggestions here: https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with-javascript-using-html2canvas and on a few other websites as well, but I was unable to find the correct code to make it work. I can get the image of the webpage to append to the end of my current page with the code below:

    html2canvas(document.body).then(function (canvas) {
    document.body.appendChild(canvas); });
}

How can I edit the above code in order to download the web page as opposed to appending it?

Answer 1

Try this

html2canvas(document.body).then(function (canvas) {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    window.location.href=image; 

});

Answer 2

did you find any workaround? I'm also struggling with the same question.

The below code might help you. Actually It create a hyper link to download the image.

  var a = document.createElement('a');
  // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
  a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
  a.download = 'somefilename.jpg';
  a.click();

Answer 3

First, inject the html2canvas library into the webpage:

function injectScript(uri) {
    const document = window.document;
    const script = document.createElement("script");
    script.setAttribute("src", uri);
    document.body.appendChild(script);
}

function injectHtml2canvas() {
    injectScript("//html2canvas.hertzen.com/dist/html2canvas.js");
}

injectHtml2canvas();

After the script has been loaded, call the library function to save the screenshot:

function saveScreenshot(canvas) {
    const fileName = "image";
    const link = document.createElement("a");
    link.download = fileName + ".png";
    console.log(canvas);
    canvas.toBlob(function (blob) {
        console.log(blob);
        link.href = URL.createObjectURL(blob);
        link.click();
    });
}

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true
}).then(saveScreenshot);

Also see the FAQ on images:

Why aren't my images rendered?

html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of the origin of the current page taint the canvas that they are drawn upon. If the canvas gets tainted, it cannot be read anymore. As such, html2canvas implements methods to check whether an image would taint the canvas before applying it. If you have set the allowTaint option to false, it will not draw the image.

If you wish to load images that reside outside of your pages origin, you can use a proxy to load the images.

http://html2canvas.hertzen.com/faq/