Class update not load background into SVG

Question

I have an Ionic App made for Android. On the app, there's a "card" like content in which the user apply custom background images through a side-menu options (selects).

These options change some classes on the container, so it receive diferent background-images according to class.

After the customization the user press a "create" button that render the card to a SVG then to a Canvas so I could retrieve the dataURL image to share or save on phone.

I'm using the plugin dom-to-image, to render the card.

But the rendered content don't receive the backgrounds after the class changes.

I noticed that if I give more "time" after the change but before hit the button. It render properly. So I put an setTimeout before calling the render, but there's not an exact time count and the background-image still don't appear.

Can you guys enlighten me?? There's any problem with that update class process interfering with the SVG to Canvas content?

I'm using a plugin instead of my raw own code because the content has, embed fonts, css styles and other stufs. Everything render properly except the background-images...

The problem only happen on mobile. Thx in advance!

Answer 1

I discover that this occurs because the content update is not registered by the plugin in "time" to it render.

The angular directives, css classes and so on are too "slow". The best way is to change the feature background-image to an img with src attribute.

When you have to update the content, just update the img src attribute and voilà!