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

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

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.