<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="nameText">
<div class="text outline">
<span>A</span>
<span>B</span>
</div>
</div>
<button id="capture">screenshot</button>
<div id="output"></div>
<script type="module" src="javascript.js"></script>
</body>
</html>
document.getElementById('capture').addEventListener('click', function() {
var node = document.querySelector('.nameText');
domtoimage.toPng(node)
.then(function(dataUrl) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '<img src="' + dataUrl + '" alt="Screenshot">';
})
.catch(function(error) {
console.error('oops, something went wrong!', error);
});
});
This doesn’t print neither text nor span divs. When its capturing range is the whole screen (document.body), the screenshot only includes screenshot button and its width is the screen width. How can I take a screenshot of text or span divs in nameText div?
+ The html structure is unchangable. I need to use that structure for some reason.