I recently needed to make thumbnails for a content management system my team is developing. We’ve built an easy-to-use single-page application for designing multi-screen presentations. The individual scenes of those presentations needed a thumbnail that can be displayed to the presenter.

Because our authoring tool is in the browser and displays live previews I was able to code up a client-side solution using HTML2Canvas-Pro.

HTML2Canvas-Pro is able to capture the browser element we use to display our live preview into an off-screen canvas element. I’m then able to grab the data URL of that canvas element and pass it up to our server as the thumbnail for a scene. I was honestly quite impressed with how easy it was to implement and creating the thumbnail this way saved a lot of time and effort.