Feature: "containing" images

I’m working on a web app using lottie with some custom tweaks to enable users to replace some of the content, previewing in the browser and then render it in node.js.

We’ve been doing it for while and it works well with some tweaks, but would like to avoid having our own fork since it’s a pain to upgrade, and others might benefit from our changes.

Since our replacement images may be any format (aspect ratio) and size, and we don’t want them to be cropped, we changed it to work like the equivalent of object-fit: contain in css.

Is this something you would want in Lottie? Looking at the code, the current solution (cropping) looks quite deliberate, and since our usage case in not the normal/intended one I’d understand if not. We’re doing it for all images but perhaps it should be opt-in per image via assets and/or support other object-fit options.

If not, exposing a reference to CVImageElement somehow so we can override imageLoaded would also enable us override the positioning without changing the lottie code as well.

For svg and html I think this would be even easier with xMidYMid meet instead of xMidYMid slice in IImageElement.

Thanks for the great work on lottie!

[bodymovin]

I’ve added on version 5.1.18 a property “imagePreserveAspectRatio” to the rendererSettings to support meet and slice. For now, on the canvas renderer, it only supports “xMidYMid meet” and “xMidYMid slice”. If people need the others I’ll consider adding them. the svg and html renderers support all of the existing preserveAspectRatio options. It also looks for a property “pr” on each image asset in the json file that has precedence over the general setting.

[friday]

@knowBalpreet I always meant to do that, but didn’t make time for it. Just published it here https://github.com/friday/lottie-node. Make sure to read and follow the instructions since otherwise it will not work.

It’s not very well tested, but has been working for us (although this version had to be rewritten a bit in the process of extracting it from our code)