When specifying filter option, get error in embedFonts

[kirilledelman]

Hi, first of all, thanks for making this library public. You are a saint.

Testing on Chrome 49.0.2623.87 (64-bit) / Mac. My document has embedded fonts ( Google Fonts )
I'm having a problem when specifying filter function to .toSvg - it fails when encounters a filtered out node.

var filterFunc = function( node ) {
    if ( node.id == 'background' ) return true;
    return false;
};

domtoimage.toSvg( container, { filter: filterFunc } )
                        .then( domtoimage.impl.util.makeImage )
                        .then( domtoimage.impl.util.delay( 100 ) )
                        .then( drawToCanvas )
                        .catch( function ( error ) { console.error( error ); } );

It fails / dies with the following error:

dom-to-image.js:198 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of undefined
    at dom-to-image.js:198:21
(anonymous function) @ dom-to-image.js:198
Promise.resolve (async)readAll @ dom-to-image.js:516
resolveAll @ dom-to-image.js:501
embedFonts @ dom-to-image.js:195
Promise.resolve (async)toSvg @ dom-to-image.js:32

On line 198 inside embedFonts, node is undefined. Because of all the Promises, I'm having a hard time actually debugging this. Do you have any ideas what could be causing this?

[tsayen]

Looks like you're filtering out the node you want to render. Make sure your filter matches that node.

[kirilledelman]

It doesn't matter what I'm actually trying to filter out - returning false from filter in any case results in node being undefined later in Promise chain. Maybe I misunderstand how the library is designed - but what I'm trying to do is give it a container with mixed dom objects in it, and filter function would return true or false for those I want included in resulting svg/foreignobject sandwich, and skip all the others.

I "fixed" it by changing this line:
From:
if (filter && !filter(node)) return Promise.resolve();
To:
if (filter && !filter(node)) return Promise.resolve(document.createElement( 'b' ));

Now there's no exception, and it ends up rendering empty/invisible <b/> instead. But it seems to be a deeper problem here - promise.resolve requires node to be defined later.

[tsayen]

Take a look at this test to see how filter should be used. When calling toSvg, you should provide the node you want to render. If your filter does not return true for the node you've provided as first argument, then you'll get this error. Perhaps this situation should be handled better. But if you give right arguments (and make sure that root node passes the filter), your problem should be fixed

[kirilledelman]

Now it makes sense! My filter should've included the container node as well as the things I'm filtering in / out.

Thank you for clearing this up.

[tsayen]

welcome :)

[tsayen]

FYI, starting from 2.1.0 this issue is handled better, the filter is no longer applied to the root node.