DEV Community

Cover image for How to Convert a React Component to an Image
saransh kataria
saransh kataria

Posted on • Originally published at wisdomgeek.com

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.

<div id="print">This will be downloaded as an image</div>
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Programming logic

As we discussed earlier, we will install thehtml2canvas NPM package.

npm install html2canvas
Enter fullscreen mode Exit fullscreen mode

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);
  };
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
errorui profile image
errorui

Thanks bro for sharing ,it helped me

Collapse
 
saranshk profile image
saransh kataria

You're welcome. Happy to hear that it was helpful.

Collapse
 
mdnihal profile image
Md Nihal • Edited

Hey It's giving me this error
can you look into the issue please stackoverflow.com/questions/782541...

#4 278ms Error loading image https://userpic.codeforces.org/3332594/title/6e3ce0bb53e6ed79.jpg 

Enter fullscreen mode Exit fullscreen mode
Collapse
 
saranshk profile image
saransh kataria • Edited

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:

    const canvas = await html2canvas(cardRef.current, {
      useCORS: true,
    });
Enter fullscreen mode Exit fullscreen mode

instead of

    const canvas = await html2canvas(cardRef.current);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zaidkhan02 profile image
Zaid Khan

Hey, when I include the button component into the code, my webpage turns blank

Image description
this is where I placed handleDownloadImage

Image description
this is where I placed the button component, which seems to be causing the problem

Image description
this is the component that I want to convert to an image

Collapse
 
zaidkhan02 profile image
Zaid Khan

Image description
i was getting this error, so it converted this into an async function. Is that the reason for the error?