Converting HTML to Image. and GIF

Introduction

Recently I created pictify.io a platform to convert HTML to Image and Gif. In this post I will try to give an overview of the working of it.

There are 4 main component of the system.

• The HTML code
• The server with puppeteer instance
• FFMPEG
• AWS S3

The Process

The user sends the request to server with HTML code. The CSS and Javascript must be included in the HTML or should be a publicly accessible link. Once the server receives the request it renders the the page using puppeteer a famous headless browser. The puppeteer waits till there are no more than 0 network connections for at least 500 milliseconds.

Using screenshot() method provided by the API the image is being captured. The captured image is piped to sharp a nodeJS image processing library to compress it.

Then the image is uploaded to a S3 bucket which is then served by cloudfront CDN. The server responds with the cloudfront URL to user.

This process becomes a little challenging when converting an HTML file with animation to GIF.

Creating GIF

The gif creation process is same as image till the html is rendered. Once the HTML is rendered the we identify the node from the DOM tree which has animation attached to it. Once we receive the animating node we start capturing image with the same screenshot() method but we also seek animation to get the next frame. We repeat this process till the animation is completed.

At the end of the process we have images as frames for the GIF. We then use FFMPEG to convert these images to GIF. Since GIFs are larger in size we use sharp to resize and compress the individual frame.

The process after this is same as for image. We upload the image to S3 bucket and send the cloudfront URL to the user.

Thanks for taking the time to read this. I hope this was helpful. If you have any doubt or what to know any process in details do let me know about it in comments.