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.
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.
1 | 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.
1 | npm i html-to-image |
3. Design component
Now, let’s simply design the React component as mentioned below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import React, { useRef } from 'react'; import sample from './images/sample.png'; function App() { const domEl = useRef(null); const downloadImage = async () => { } return ( <div classname="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.
1 2 3 4 5 6 7 8 9 10 11 12 | 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.
1 2 3 4 5 6 7 8 9 10 11 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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 classname="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..!! 🙂
