Lessons Learned from Converting Html to Image

Problems and solutions when you take a screenshot of a web page

Image by Text To Photo Editor. Background photo by Jr Korpa on Unsplash

[Updated: 2022–01–13 Download the appended div]

Introduction

Recently, I had a project where I needed to convert HTML to an image for downloading. I had quite a few issues using different JavaScript libraries. This article shows you the problems I encountered and their solutions.

Remove extra CSS

Problem

I used Bootstrap on some pages. Chrome, Firefox, Safari, and Brave all cut out the left side of the image.

The images below are 1200x630 px.

An image downloaded from Chrome.

An image downloaded from Firefox.

An image downloaded from Safari.

Solution

If you have this problem, removing all unnecessary CSS or CSS frameworks may solve…