Generate an image of a div and Save as

Question

I'd like to create an input button "Save image" that :

take a screen shot of a div
ask to "Save as" on the user's computer

I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly :

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
      }
    });
}

But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I'm a little bit confused... I think I'll have to use the FileSaver.js and to create a new blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

But I don't get how to implement the saveAs in my html2canvas, how to cast properly a new blob...

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);

            var blob = new Blob(img, {type: "image/jpeg"});
            var filesaver = saveAs(blob, "my image.png");
      }
    });
}

Also I tried to do something with this, by extracting the base64 generated URL, but it's too complicated for me to understand everyting : http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

But someone give me a few tips and help me please ?

How you had taken the screenshot? provide the code if you are having that one — Piyush, Jul 06 '17 at 10:33
https://stackoverflow.com/questions/45035486/local-storage-bug-in-react-js — Piyush, Jul 11 '17 at 13:08
If you are using the latest version of the library then syntax has been changed. — Amit Kumar Gupta, May 18 '18 at 14:20
You can use `canvas.toBlob()`: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob — Aral Roca, Mar 11 '22 at 13:30

score 18 · Answer 1 · edited Oct 22 '19 at 10:41

18

You could do this approach:

//Creating dynamic link that automatically click
function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}

//Your modified code.
function printToFile(div) {
    html2canvas(div, {
        onrendered: function (canvas) {
            var myImage = canvas.toDataURL("image/png");
            //create your own dialog with warning before saving file
            //beforeDownloadReadMessage();
            //Then download file
            downloadURI("data:" + myImage, "yourImage.png");
        }
    });
}

edited Oct 22 '19 at 10:41

masud_moni

1,121
16
33

answered Nov 12 '15 at 10:26

Paweł Głowacz

2,926
3
18
25

Yesssssss !! Just needed to add `document.body.appendChild(link);` after the `link.href = uri;` and it works !! In a real easy way, thank you. – Jaggana Nov 12 '15 at 10:48
1

Thanks! And it seems the post-rendering syntax has changed as of May'17.. it's now `html2canvas(div).then(function(canvas) {...});` ref: https://html2canvas.hertzen.com/getting-started – Nikhil VJ May 03 '18 at 14:00
html2canvas is not defined – JRichardsz Oct 16 '22 at 17:44

score 7 · Accepted Answer · answered Jul 10 '17 at 05:01

7

Here is the final code, if it can helps you :

function PrintDiv(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL();
            downloadURI(myImage, "MaSimulation.png");
      }
    });
}

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();   
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}

answered Jul 10 '17 at 05:01

Jaggana

540
1
6
15

Working in chrome but not in IE 11 – codemirror Sep 08 '17 at 11:07
2

Can you please share the full code or explain a bit more I don´t fully undestand how it works and I'm trying to achieve the same thing – Javier Olayo Mar 13 '20 at 07:00

score 1 · Answer 3 · answered Nov 12 '15 at 10:15

1

Have you looked at

http://eligrey.com/demos/FileSaver.js/

Looks like it does what you need

answered Nov 12 '15 at 10:15

Matt Bryson

2,286
2
22
42

Thank you, but I already went on there, that's why I know I have to use the Filesaver.js, on this page, they are using canvas, but I can't put my div into – Jaggana Nov 12 '15 at 10:19

score 1 · Answer 4 · answered May 09 '18 at 12:52

This works fine for me.

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    clearDynamicLink(link); 
}

function DownloadAsImage() {
    var element = $("#table-card")[0];
    html2canvas(element).then(function (canvas) {
        var myImage = canvas.toDataURL();
        downloadURI(myImage, "cartao-virtual.png");
    });
}

score 0 · Answer 5 · answered Sep 07 '22 at 18:49

Nowadays html2canvas has changed to javascript promise. So the updated code should be:

function PrintDiv(div)
{
    html2canvas(div).then(canvas => {
        var myImage = canvas.toDataURL();
        downloadURI(myImage, "MaSimulation.png");
    });
}

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();   
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}

Generate an image of a div and Save as

5 Answers5

Linked