Image from React Component (JPG or PNG)

 by Robin Wieruch
 - Edit this Post

A brief tutorial on how to generate an image (JPG or PNG) from a React component. Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as image. For example, when you display charts based on data, a user should be able to export the chart as image. In this React tutorial, I want to show you how it works.

First, you have to declare a certain area in your application that should be downloadable as image by using a :

const App = () => {
const printRef = React.useRef();
return (
<div>
<div>I will not be in the image.</div>
<div ref={printRef}>I will be in the image.</div>
</div>
);
};

Second, create a button with an where you will implement the logic to download the part of the component as image:

const App = () => {
const printRef = React.useRef();
const handleDownloadImage = () => {
// TODO: logic
};
return (
<div>
<button type="button" onClick={handleDownloadImage}>
Download as Image
</button>
<div>I will not be in the image.</div>
<div ref={printRef}>I will be in the image.</div>
</div>
);
};

Third, install a library called html2canvas via your command line:

npm install html2canvas

And fourth, use the library to draw the component on a canvas and to transform it into an image:

import html2canvas from 'html2canvas';
const App = () => {
const printRef = React.useRef();
const handleDownloadImage = async () => {
const element = printRef.current;
const canvas = await html2canvas(element);
const data = canvas.toDataURL('image/jpg');
const link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = data;
link.download = 'image.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(data);
}
};
return (
<div>
<button type="button" onClick={handleDownloadImage}>
Download as Image
</button>
<div>I will not be in the image.</div>
<div ref={printRef}>I will be in the image.</div>
</div>
);
};

That's it. If you want to download the image as JPG and not PNG, just exchange jpg with png wherever it is used. If you want to go a bit further and download a PDF instead of an image, then head over to this tutorial: .

Keep reading about 

React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React (e.g. useState and useReducer ) but also for consuming React's Context…

A brief tutorial on how to generate a PDF from a React component . Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as PDF…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.