Not working with some bodymovin json data

[sudesh1456]

I'm using this file that rendering blank video

[friday]

Hi! Thanks for reporting this.

I'm also getting blank output with that data file, although it does work in Lottie-web. Unfortunately I don't know how to fix it. lottie-node is basically an API wrapping Lottie, node-canvas and jsdom. The problem is not likely in lottie-node itself but one of those libraries (my guess is node-canvas). That's a lot of code to debug, and I don't have the time I'm afraid.

If you want to avoid the problem, try removing layers in After Effects and/or tweaking export settings in Bodymovin (and let me know if you find out what caused it since it may help someone else). I would make sure all assets are either included or remove the layers.

Also, do you mind if I attach the file to this issue via github's attach feature? This will ensure that the file is accessible as long as the issue is.

[sudesh1456]

Yes, Please attach via github.
I also tried some basic effects like [https://lottiefiles.com/1708-success](this one)
It is also not rendered on video properly.

[friday]

Sorry to hear that!

Here are both of them attached:
hbd.json.zip
lottiefiles-1708-success.json.zip

If you or someone want to do more digging, you're very welcome to. Try to find what these have in common and comment if you find more examples (especially small and simple animations).

If someone is able to isolate a minimal test case for node-canvas this would be even better. This means a canvas that renders in browsers, but not node-canvas, and the test-case shouldn't include Lottie.

[WangShuXian6]

when use a json file with image,i found that animation.isLoaded was false,

but when use a json file without image,i found that animation.isLoaded was true,

setImmediate(() => {
  console.log('animation',animation)
  //console.log(canvas.toDataURL())
  fs.writeFile(`${__dirname}/output.png`, canvas.toBuffer(), err => {
    if (err) {
      throw err;
    }
  });
});

---

so i guess the problem is lottie do not loaded image when lottie-node render-png

[friday]

so i guess the problem is lottie do not loaded image when lottie-node render-png

I'm sure that's not it. The issue happened without images (see above), and I developed this specifically for rendering lottie animations with interchangable images. They all worked, but I don't own the right to them.

Though maybe isLoaded is worth looking into. Thanks!

[issderek]

so i guess the problem is lottie do not loaded image when lottie-node render-png

I'm sure that's not it. The issue happened without images (see above), and I developed this specifically for rendering lottie animations with interchangable images. They all worked, but I don't own the right to them.

Though maybe isLoaded is worth looking into. Thanks!

I encountered the same question. When I look deep into the source code of lottie.js, I find the problem:

function loaded() { return this.totalImages === this.loadedAssets; }

the loadedAssets+1 when the picture triggered the onload function. However the code below is not working in canvas.:
img.addEventListener('load', this._imageLoaded.bind(this), false);

I think this may be the problem but I don't know how to fix it

[friday]

Thanks for trying! lottie-node patches the lottie-web code by overriding the image load handler so that it works with node + node-canvas. Could be something related to this. I'm not convinced this is the right place to look, or if it's even the same issue, but since I haven't got time to investigate this myself I'm glad for all of your efforts 👍

[friday]

puppeteer-lottie, an alternative to lottie-node was just created by @transitive-bullshit. I haven't tried it, but since it doesn't deal with Node-canvas at all it's not very likely to have this issue.

[galipmedia]

Did anyone find a solution to the inclusion of images making the isLoaded: false ? Node-lottie is otherwise working well for me, I cannot use puppeteer-lottie because it is too slow for my use case. I have tried using the inline images option, local images, remote images. I have played around with the code, it seems to me the CVImageElement.prototype.createContent which has been patched is not even getting fired, as I put a console log in it, both patched and unpatched.

[friday]

Feel free to play around with it and submit PRs if there are improvements that can be made.

[razvanmitre]

Fixed in #14

[galipmedia]

@razvanmitre thank you I cannot wait to try this!

[galipmedia]

I have tested it and can confirm it is working! What a legend!

[GDownes]

Looking forward to this being merged, thanks

[friday]

I copied only the parts needed from @razvanmitre's PR to fix compatibility with recent Lottie-web (image loading was completely broken). Note that this issue originally had nothing to do with that. It may have fixed all or only some of the cases mentioned above.