CODEWITHSUNDEEP
javascriptangularjspromiseqlikviewqliksense
Shanky
Shanky

Reputation: 361

Uncaught (in promise) dom-to-image

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?

Upvotes: 4

Views: 16844

Answers (4)

aqib
aqib

Reputation: 135

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();
});

Upvotes: 0

Kevin Bennett
Kevin Bennett

Reputation: 1

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!

Upvotes: 0

sonu kumar
sonu kumar

Reputation: 143

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.

Upvotes: 1

jay sheth
jay sheth

Reputation: 21

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.

Upvotes: 2

Related Questions