Member-only story
Here’s Why I’m Replacing html2canvas With html-to-image in Our React App
A comparison of the two libraries for capturing React components as images
I recently wrote an article about capturing React components as images and shared it on Reddit. One redditor commented on it, saying that while the library is robust, they used another one that they thought performed a bit better:
“A similar library that I ultimately ended up using was html-to-image. Much much faster and not only converts components to canvas but directly to png/blob/svg.”
We use html2canvas in another part of our application where we need to download multiple visualizations as separate images, zip them, and then download them. It works fine, but I have to say the performance can get rather slow. I had never heard of html-to-image but thought I should check it out!
After trying it out, I think it’s a great lightweight alternative to html2canvas. In this article, we’ll go over how it works and then create a React app that will compare the two libraries side by side.
First, install the package. Unlike html2canvas, it has no dependencies:
npm i html-to-imageNext, in your component, import it:
import * as htmlToImage from 'html-to-image';Then, you can write a function that grabs a DOM element from your React app and converts it to your specified format. For the sake of brevity, we’ll only be using the png format in the app we’re going to build:
In the NPM docs, the provided example uses download to handle the downloading. But in this article, we’ll use our saveAs function from the previous article.
At the time of writing, below are the values for three key points of interest (KPIs) that I’m using when comparing the two libraries: unpacked size, total files, and dependencies.
