Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to take screenshot of a div with JavaScript
Taking a screenshot of a div element in JavaScript requires converting HTML elements to an image format. Since JavaScript cannot directly capture DOM elements as images, we use third-party libraries like html2canvas to achieve this functionality.
The html2canvas library renders DOM elements onto a canvas element, which can then be converted to an image or downloaded. This approach works by parsing the CSS styles and creating a visual representation of the element.
Installation and Setup
To use html2canvas, include it via CDN or install it through npm:
// Via CDN (add to HTML head) <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> // Via npm npm install html2canvas
Basic Syntax
html2canvas(element, options).then(canvas => {
// Handle the canvas
});
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Div Screenshot Example</title>
<style>
#capture {
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
background-color: rgb(43, 216, 216);
margin: 20px;
border: 2px solid #333;
}
span {
flex: 1;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
#first { background-color: rgb(15, 168, 15); }
#second { background-color: rgb(43, 93, 228); }
#third { background-color: rgb(194, 55, 13); }
button {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="captureDiv()">Capture as Canvas</button>
<button onclick="downloadImage()">Download as Image</button>
<script>
const captureDiv = () => {
html2canvas(document.querySelector('#capture')).then(canvas => {
document.body.appendChild(canvas);
});
}
const downloadImage = () => {
html2canvas(document.querySelector('#capture')).then(canvas => {
const link = document.createElement('a');
link.download = 'div-screenshot.png';
link.href = canvas.toDataURL();
link.click();
});
}
</script>
</body>
</html>
Advanced Options
The html2canvas library supports various configuration options:
html2canvas(element, {
allowTaint: false,
backgroundColor: '#ffffff',
canvas: null,
foreignObjectRendering: false,
imageTimeout: 15000,
ignoreElements: (element) => false,
logging: true,
onclone: null,
proxy: null,
removeContainer: true,
scale: 1,
useCORS: false,
width: 300,
height: 300
});
Common Use Cases
| Method | Description | Use Case |
|---|---|---|
| Append to DOM | Add canvas to page | Preview screenshot |
| Download directly | Save as file | Export functionality |
| Convert to base64 | Get data URL | Upload to server |
Browser Compatibility
Html2canvas works in modern browsers but has some limitations with cross-origin images and complex CSS properties. Always test thoroughly across target browsers.
Conclusion
Html2canvas provides an effective solution for capturing div screenshots in JavaScript. It converts DOM elements to canvas, enabling image downloads or further processing of the captured content.
3K+ Views
