Sometimes you want to give the users the ability to download a part of the web application as an image. In that case, you want a way to convert a React component to an image. And it can be straightforward by using a third-party NPM package called html2canvas. Let us look at how to do it.
Setup
We want to first mark the div in HTML markup that we want to be downloaded when the user hits the download button. This could be a chart, user data, a table, or anything we want. We will allocate an id to that element.
<div id="print">This will be downloaded as an image</div>
We can wrap this as a React component with an event handler attached to a download button:
const App = () => {
const handleImageDownload = () => {
// TODO: add logic here
};
return (
<>
<button type="button" onClick={handleImageDownload}>Download</button>
<div id="print">This will be downloaded as an image</div>
</>
);
}
Programming logic
As we discussed earlier, we will install thehtml2canvas NPM package.
npm install html2canvas
Then, all we need to do is use the package to fetch the corresponding div that we want to convert to an image. We then create a link in memory to download the image, click it programmatically and then remove the link from the DOM.
const handleDownloadImage = () => {
const element = document.getElementById('print'),
canvas = await html2canvas(element),
data = canvas.toDataURL('image/jpg'),
link = document.createElement('a');
link.href = data;
link.download = 'downloaded-image.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
And that is all we need to do to convert a React component to an image! Hope you found this post useful.
Originally published at https://www.wisdomgeek.com on September 28, 2021.
Top comments (6)
Thanks bro for sharing ,it helped me
You're welcome. Happy to hear that it was helpful.
Hey It's giving me this error
can you look into the issue please stackoverflow.com/questions/782541...
replied on SO as well:
You would need to enable CORS in the h2ml2canvas options for this to work. It would need to be configured like:
instead of
Hey, when I include the button component into the code, my webpage turns blank
this is where I placed handleDownloadImage
this is where I placed the button component, which seems to be causing the problem
this is the component that I want to convert to an image
i was getting this error, so it converted this into an async function. Is that the reason for the error?