Dom-to-image: Topng() and toJPEG() give empty response

[shahebaz444]

Use case: description, code

domtoimage.toJpeg(document.getElementById('gridview'), { quality: 0.95 })
.then(function (dataUrl) {
console.log(dataUrl)
});

Html


[ngModelOptions]="{standalone: true}"><br />

Actual behavior (stack traces, console logs etc)

(response)
data:,

Error:
Error while reading CSS rules from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules ----->> dom-to-image.js:684

[Syndesi]

Hi,
do you use a UI framework like React, Angular or Vue? If so, can you please post the whole rendered HTML, preferred within a code element?
Furthermore without an example it's hard to gues the error. It might be CORS, unknown elements (if your HTML is the rendered HTML) or even an empty stylesheet.

[nassatar]

hi
i met same problem in my vue project.
thank you, @Syndesi. your answer helped me figure out the problem ^-^.
and @shahebaz444 , make sure that your tag with id 'gridview' has a size.
If so, you should check the elements you posted are rendered or not.
and if you run your project in localhost, solve cross-orion first.

[josemigg]

I had the same issue. the problem was that I had a this styles in the rendered component:

.component-to-png { margin: 0 auto; height: 320px; width: 300px; }

I just added a wrapper and removed margin: 0 auto;

.component-to-png-wrapper { display: flex; justify-content: center; }

.component-to-png { height: 320px; width: 300px; }

This worked.

[InYourHead]

If you use toPng() instead of toBlob() method, you need to check, does your image size meets limitations
browser limitations

[robertying]

My problem was I didn't set the size of the image.

Adding some size to it solves the issue:

DomToImage.toPng(
                  document.getElementById("content"),
                  {
                    width: 100,
                    height: 100
                  }
)