search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.21k stars 1.68k forks source link

Background images load only on second render #394

Open ArtemisGraphic opened 2 years ago

ArtemisGraphic commented 2 years ago

I have a div with two divs inside, each one with a background image. When I render, the images are not displayed, but If I try a second time (and any subsequent time) the images will be displayed. One of the two is quite large (1200x800), the other is 400x300. How can I load them before the first render?

.board-overlay { background: url('/img/homebrew/board/overlay-faction-board.png') left top no-repeat; width: 100%; height: 100%; z-index: 2; }

.board-avatar-image{ background: url('/img/homebrew/board/avatar-1.jpg') left 25px no-repeat; width: 489px; height: 300px; position: absolute; z-index: 1; }

ArtemisGraphic commented 2 years ago

@tsayen I have found this issue to be tied to the size of the image, mainly on mobile, is there any way or parameter to allow larger images to be rendered?

jiazez commented 2 years ago

You can try generating twice domtoimage.toPng(node).then(function () { domtoimage.toPng(node).then(function (dataUrl) { this.url=dataUrl }); });

andyrobert3 commented 1 year ago

You can try generating twice domtoimage.toPng(node).then(function () { domtoimage.toPng(node).then(function (dataUrl) { this.url=dataUrl }); });

For those who like the async await syntax better

await domtoimage.toPng(node)
const url = await domtoimage.toPng(node)