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 <gridster [options]="options" class="grid-height" id="gridview"> <gridster-item [item]="textgrid" *ngFor="let textgrid of textList"> <textarea ui-tinymce="tinymceOptions" [(ngModel)]="templateHTMLObj" (click) = "onClick($event)" placeholder="Enter Text Here" class="text-height" [ngModelOptions]="{standalone: true}">

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