search

tsayen / dom-to-image

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

how toPNG with hidden dom #424

Closed dengshenkk closed 1 year ago

dengshenkk commented 1 year ago

Use case: description, code

codePen

Expected behavior

set a box style is absolute left 99999px top 99999px, ensure the dom is not display in the window, then use toPNG to img is real dom style

Actual behavior (stack traces, console logs etc)

toPNG then get a blank img

Library version

2.6.0

Browsers

andyrobert3 commented 1 year ago

Maybe you can use display=none in the styles instead @dengshenkk

It worked for me, the dom is not visible, but an image can still be generated

andyrobert3 commented 1 year ago

This causes some issues with alignment

Another hack that I did @dengshenkk, was that I just covered the intended DOM to convert to image, with another placeholder DOM with a much higher zIndex & position: absolute

dengshenkk commented 1 year ago

这会导致一些对齐问题

我做的另一个黑客@dengshenkk，是我刚刚覆盖了要转换为图像的预期 DOM，以及另一个具有更高zIndex&的占位符 DOMposition: absolute

ok

pthieu commented 10 months ago

@andyrobert3 seems like display=none doesn't work for me. Do you set that on the node that you select using document.getElementById?