Thanks for the suggestions. For now, I was unable to find a good, quick solution for the client side so I instead decided to implement a microservice to do this for me on the server for now. I was able to get a very nice solution using the server side approach and it didn’t suck up any more of my time. I will try to come back to it later but for now, with my current user volume, the server side solution will be just fine. For anyone interested, here is what I did:
- Server is Node.js and takes a simple POST request with the info to build my “slideshow”.
- Ionic app sends POST to server to build the slideshow.
- The server returns an image back to the client to store in the user’s photos.
For the server that does all the work, it uses several NPM packages:
- png-file-stream - This is used by phantom to render to a PNG.
- gifencoder - This module takes the PNGs and combines them into a single animated GIF. The library allows you to specify the duration for each slide, image quality, loop count, etc.
So, with just a few lines of code (used the sample code from each module’s NPM page easily), I was able to process my HTML slides and render an animated GIF slideshow from them.
I tried this from Ionic, but the phantom module didn’t work and I didn’t have time to mess with it anymore so I’m going to go with the server solution for now.