Recreating html2canvas functionality

[exoup]

I recently switched a project over from html2canvas-pro to snapdom because I liked the idea of a faster and smaller package. That said, I've run into some weird behavioral differences.

On html2canvas (h2c), when it filters out unused elements, my capture area is properly responsive and shrinks/grows accordingly.
With snapdom, it does not shrink or adjust at all. (My content does shift though.)

Is there some known issue where Snapdom doesn't respect flex box? (I do use filterMode: remove)

An additional problem I had hoped to solved via a plugin is that h2c exposes two configuration options:
windowWidth and windowHeight

These can be used to change the size of the rendering element (I use it for displaying mobile device captures in a desktop layout).
I attempted to recreate this functionality via a plugin but it does not have access to the window element. Using the width/height options also don't seem to work on mobile.

Hoping someone can point me in the right direction for correcting my issues. Thanks!

[tinchox5]

Sorry for the delayed reply, and thanks for the detailed writeup — this was helpful to dig into.

On the shrink/flexbox issue: you've actually found a real gap, not a misconfiguration on your part. A couple of quick notes:

• If you're using filter + filterMode: 'remove', that option currently isn't wired into the size-correction pass at all — the bbox stays at the original element's full size no matter what gets filtered out.
• If you switch to exclude + excludeMode: 'remove' instead, you should see the box shrink vertically when content is removed — but horizontal shrink is not implemented, and flex/grid/table containers are explicitly skipped from the shrink logic today to avoid producing fragile/incorrect layouts.

So what you're seeing is an actual current limitation in the capture engine, not something you're doing wrong. I'm going to work on improving this — properly honoring filterMode and extending the shrink correction to handle width and flex/grid layouts.

On windowWidth/windowHeight: there's no equivalent today. snapdom's width/height/scale options only rescale the output raster — they don't affect layout, which is why they didn't help for your mobile-in-desktop use case. The reason your plugin couldn't do this cleanly is that there's no first-class support for it, not a limitation in the plugin hooks themselves — beforeClone/afterClone do have access to the real window via the element's ownerDocument.defaultView, so a plugin could in principle move the element into an offscreen iframe at the target width, force layout, capture, then restore. But that's not something we provide a helper for right now, so it's rough to get right (asset loading timing, restoring exact DOM position, etc).

I'll treat this as something to improve on the engine side rather than expecting it to be solved purely from userland — will follow up here once there's progress. Thanks again for the detailed report, it's genuinely useful.