<!DOCTYPE html>
<html>
<head>
<style>
/* Style the captured slide element */
.capture-me {
/* Add any desired styling here */
}
</style>
<script>
function captureScreenshot() {
// Find the element with the assigned class name
var slideElement = document.querySelector('.capture-me');
if (slideElement) {
// Create a canvas and capture the element
var canvas = document.createElement('canvas');
canvas.width = slideElement.offsetWidth;
canvas.height = slideElement.offsetHeight;
var context = canvas.getContext('2d');
context.drawImage(slideElement, 0, 0, canvas.width, canvas.height);
// Convert canvas to data URL and create download link
var screenshotDataURL = canvas.toDataURL('image/png');
var downloadLink = document.createElement('a');
downloadLink.href = screenshotDataURL;
downloadLink.download = 'screenshot.png';
downloadLink.click();
} else {
console.error('Slide element not found.');
}
}
</script>
</head>
<body>
<!-- Trigger the captureScreenshot() function as needed, e.g., a button click. -->
<button onclick="captureScreenshot()">Capture and Download</button>
</body>
</html>