Uncaught (in promise) dom-to-image

Question

I have a page that has multiple canvas html elements. The website is actually built in angularjs and there are charts that are displayed on it which have been created in Qlik. I am trying to get a screenshot of the individual charts which are rendered as canvas elements on the browser.

Using https://github.com/tsayen/dom-to-image, I am able to get the screenshot of just first chart using the following code:

var node = document.getElementById(divToPrint);
    domtoimage.toPng(node)
        .then(function (dataUrl) {
            var link = document.createElement('a');
            link.download = divToPrint + '.png';
            link.href = dataUrl;
            link.click();
        });

However, for all other charts, I get the following error:

Uncaught (in promise) Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}
Promise.then (async)

I found somebody already posted this on github but there is no answer: https://github.com/tsayen/dom-to-image/issues/181

Is there something missing in the code?

I've never used that library, but it seems you're supposed to use the dataUrl as the src of an image element. It is a "data:" URL, i.e. it is an encoding of the actual bytes that make up the image. I'm drawing this conclusion from looking at the sample on the project's page. — Zunino, Sep 21 '18 at 19:09
This will allow the user to download the image. Example on the projects's page is for JPEG image and I am using it to save as PNG image: Save and download a compressed JPEG image: domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; link.href = dataUrl; link.click(); }); — Shanky, Sep 21 '18 at 19:12
https://stackoverflow.com/questions/48926412/return-a-promise-result-in-order-using-the-library-dom-to-image - It might be related but I am not familiar with the Promise object. — Shanky, Sep 21 '18 at 19:15
Given the github issue is closed, did you ask how they solved it? — Bergi, Sep 21 '18 at 21:58

score 2 · Answer 1 · answered Jan 12 '19 at 05:50

You can try this using https://github.com/tsayen/dom-to-image. Below is the simple code for that.

var node = document.getElementById(divToPrint);
domtoimage.toBlob(document.getElementById('node'))
    .then(function (blob) {
        saveAs(blob, 'my-node.png');
    });

But you have to use fileSaver.js for that. You can get it from here https://github.com/eligrey/FileSaver.js/

and import it as import { saveAs } from 'file-saver';. in your project.

score 1 · Answer 2 · answered Apr 28 '20 at 12:34

1

I was also facing the same issue.Please make sure div is applied to div and not to svg, g or any other tag.If your node is written in ts file, then i would recommend trying placing the node in html file.

answered Apr 28 '20 at 12:34

sonu kumar

143
1
8

score 1 · Accepted Answer · answered Nov 25 '21 at 14:12

This way you don't need filesaver

domtoimage.toPng(document.getElementById('areaChart'), { quality: 0.95 })
.then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'area-chart.png';
    link.href = dataUrl;
    link.click();
});

score 0 · Answer 4 · answered Aug 25 '20 at 18:32

I know this is an old question, but in case anyone else has this issue...

My problem was that I had a malformed HTML file and that was causing dom-to-image to fail to make a correct image.

I was able to find this by changing the DIV I was making an image of until I was able to narrow down the section that was causing the problem. Once I was able to see the section having the issue, it was easy to see the typo. Once corrected, the dom-to-image worked perfectly!

Uncaught (in promise) dom-to-image

4 Answers4