<!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 span divs. When its node is document.body, it only shows screenshot button. How can I take a screenshot of span divs in nameText div?
+ The html structure is unchangable. I need to use that structure for some reason.