How to convert a React component to an image

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.

- Advertisement -
<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.

Recent Articles

Detecting element causing CSS overflow

CSS overflows are an annoyance that keep showing up once in a while and are really hard to debug. Unwanted and unexpected...

Opening a Browser with DevTools Open by Default

While automating some parts of my development workflow, I was wondering if there was a way of opening a browser with DevTools...

How to create a UUID in JavaScript

Creating a globally unique identifier has always been a necessity in all programming languages and for some reason, JavaScript never had a...

How to convert a React component to an image

Sometimes you want to give the users the ability to download a part of the web application as an image. In that...

Specifying a node version in Repl.it

I was recently trying to use a later version of Node on Repl.it. I wanted to use a package that supported ES...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.