Cannot take screenshot of more complex webpages about dom-to-image-more HOT 7 CLOSED

I think by "post-processing op", you mean running styles through copyUserComputedStyleFast as a first pass, then the remainder through the block of code you linked to above, right? That would result in the best performance.

Correct!

from dom-to-image-more.

I noticed that for toSvg(node, options), the sandbox is not removed, and the default styles cache is not cleared after 20s.
Is persisting the default styles cache of benefit in your opinion?
(Polluting the DOM with 1 <iframe> per SVG screenshot is a bug of course.)

from dom-to-image-more.

You are correct. removeSandbox is called in draw(), which calls toSvg(). toSvg() does not call removeSandbox. We need to move the removeSandbox call from draw() into toSvg().

The other methods, like toPng(), call draw(), which is why this works: https://jsfiddle.net/L4bdynwr/.

from dom-to-image-more.

Could you update this SO comment to "maybe" recommend filterWinningInlineStyles multi-pass compression as a post-processing op?copyUserComputedStyle is an overeager data reduction.

If the library adopts filterWinningInlineStyles it will be necessary to put the clone root in the sandbox iframe, then take the iframe width and height straight from the original document.

    function copyUserComputedStyle(sourceElement, sourceComputedStyles, targetElement) {
        const targetStyles = targetElement.style;
        const inlineStyles = sourceElement.style;
        const inlineStyleText = inlineStyle.cssText;

        for (let property of sourceComputedStyles) {
            const value = sourceComputedStyles.getPropertyValue(property);
            const inlineValue = inlineStyles.getPropertyValue(property);

            inlineStyles.setProperty(style, 'revert');
            const userAgentValue = sourceComputedStyles.getPropertyValue(property);

            if (userAgentValue !== value) {
                targetStyles.setProperty(property, value, undefined);
            }

            inlineStyles.setProperty(property, inlineValue);
        }

        if (!inlineStyleText.length) sourceElement.removeAttribute('style');
    }

from dom-to-image-more.

I think by "post-processing op", you mean running styles through copyUserComputedStyleFast as a first pass, then the remainder through the block of code you linked to above, right? That would result in the best performance.

Thanks for giving a shot at implementing this!

I did post an extra comment on StackOverflow. However, I cannot recommend this approach due to the complexity of the algorithm (see my comment in #92).

from dom-to-image-more.

Seems to work fine with current source inlined in this fiddle https://jsfiddle.net/L4bdynwr/

from dom-to-image-more.

Sorry, that leak has been corrected in v2.14.1 and v3.0.2-rc.0

from dom-to-image-more.