Convert HTML element or document into Image in React

Today we will show you how to convert HTML element or document into Image in React. Sometimes you may need to download an Image of an element so here you will learn easy steps to convert document into Image using NPM Package.

Checkout more articles on ReactJS

Demo Application

In this example, we'll convert `div` base HTML element into image and download it on button click.

Output - Convert HTML element or document into Image in React - Clue Mediator

Steps to convert HTML element into Image in React

Create React application
Install NPM dependency
Design component
Use the package to convert HTML into image
Output

1. Create React application

Let’s create a react application using `create-react-app`. Run the following command to create a React App.

npx create-react-app react-html-to-image-app

2. Install NPM dependency

Here, we will use the html-to-image npm package to convert HTML into Image. Run the following command to install the dependency.

npm i html-to-image

3. Design component

Now, let’s simply design the React component as mentioned below.

App.js

import React, { useRef } from 'react';
import sample from './images/sample.png';

function App() {

  const domEl = useRef(null);

  const downloadImage = async () => {

  }

  return (
    <div class="App">
      <button onclick={downloadImage}>Download Image</button>

      <div id="domEl" ref={domEl}>
        <h3>Convert HTML element or document into Image in React</h3>
        <h3><a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3>
        <img src={sample} width="100">
      </div>

    </div>
  );
}

export default App;

Let’s design the component using the following style.

index.css

body {
  margin: 20px;
}

#domEl {
  position: relative;
  height: 230px;
  width: 500px;
  padding: 20px;
  background: #fff4f4;
  border: 1px solid #ddd;
}

4. Use the package to convert HTML into image

Import the `html-to-image` npm package in the `App.js` component. Use the `.toPng()` method where you have to pass the reference of the DOM element and get the image in base64 string format.

import * as htmlToImage from 'html-to-image';

const downloadImage = async () => {
  const dataUrl = await htmlToImage.toPng(domEl.current);

  // download image
  const link = document.createElement('a');
  link.download = "html-to-img.png";
  link.href = dataUrl;
  link.click();
}

Refer the following articles to download or open image in new tab.

5. Output

Put all code together and see how it looks.

App.js

import React, { useRef } from 'react';
import sample from './images/sample.png';

import * as htmlToImage from 'html-to-image';

function App() {

  const domEl = useRef(null);

  const downloadImage = async () => {
    const dataUrl = await htmlToImage.toPng(domEl.current);

    // download image
    const link = document.createElement('a');
    link.download = "html-to-img.png";
    link.href = dataUrl;
    link.click();
  }

  return (
    <div class="App">
      <button onclick={downloadImage}>Download Image</button>

      <div id="domEl" ref={domEl}>
        <h3>Convert HTML element or document into Image in React</h3>
        <h3><a href="https://www.cluemediator.com/" target="_blank" rel="noopener">Clue Mediator</a></h3>
        <img src={sample} width="100">
      </div>

    </div>
  );
}

export default App;

Let’s run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project