Se puede tomar una captura de pantalla de cualquier elemento en JavaScript utilizando la biblioteca html2canvas . Esta biblioteca se puede descargar desde su sitio web oficial. Los pasos a continuación muestran el método para tomar una captura de pantalla de un elemento <div> usando JavaScript.
Paso 1: Cree un documento HTML en blanco.
Paso 2: Incluya el código de la biblioteca html2canvas usando el archivo descargado o usando un enlace a una versión de CDN.
HTML
<!DOCTYPE html> <html> <head> <title> How to take screenshot of a div using JavaScript? </title> <!-- Include from the CDN --> <script src= "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"> </script> <!-- Include locally otherwise --> <!-- <script src='html2canvas.js'></script> --> </head> <body> </body> </html>
Paso 3: cree un <div> que debe capturarse en la captura de pantalla y asígnele una identificación para que pueda usarse más tarde.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to take screenshot of
a div using JavaScript?
</title>
<!-- Include from the CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<!-- Include locally otherwise -->
<!-- <script src='html2canvas.js'></script> -->
<style>
#photo {
border: 4px solid green;
padding: 4px;
}
</style>
</head>
<body>
<div id="photo">
<h1>GeeksforGeeks</h1>
Hello everyone! This is a
trial page for taking a
screenshot.
<br><br>
This is a dummy button!
<button> Dummy</button>
<br><br>
Click the button below to
take a screenshot of the div.
<br><br>
</div>
<h1>Screenshot:</h1>
<div id="output"></div>
</body>
</html>
Paso 4: cree un botón dentro del elemento <div> y use un controlador «onclick» para el botón.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to take screenshot of
a div using JavaScript?
</title>
<!-- Include from the CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<!-- Include locally otherwise -->
<!-- <script src='html2canvas.js'></script> -->
<style>
#photo {
border: 4px solid green;
padding: 4px;
}
</style>
</head>
<body>
<div id="photo">
<h1>GeeksforGeeks</h1>
Hello everyone! This is a
trial page for taking a
screenshot.
<br><br>
This is a dummy button!
<button> Dummy</button>
<br><br>
Click the button below to
take a screenshot of the div.
<br><br>
<!-- Define the button
that will be used to
take the screenshot -->
<button onclick="takeshot()">
Take Screenshot
</button>
</div>
<h1>Screenshot:</h1>
<div id="output"></div>
</body>
</html>
Paso 5: La función para tomar la captura de pantalla se define dentro de la etiqueta <script>. Esta función usará la biblioteca html2canvas para tomar la captura de pantalla y agregarla al cuerpo de la página.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to take screenshot of
a div using JavaScript?
</title>
<!-- Include from the CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<!-- Include locally otherwise -->
<!-- <script src='html2canvas.js'></script> -->
<style>
#photo {
border: 4px solid green;
padding: 4px;
}
</style>
</head>
<body>
<div id="photo">
<h1>GeeksforGeeks</h1>
Hello everyone! This is a
trial page for taking a
screenshot.
<br><br>
This is a dummy button!
<button> Dummy</button>
<br><br>
Click the button below to
take a screenshot of the div.
<br><br>
<!-- Define the button
that will be used to
take the screenshot -->
<button onclick="takeshot()">
Take Screenshot
</button>
</div>
<h1>Screenshot:</h1>
<div id="output"></div>
<script type="text/javascript">
// Define the function
// to screenshot the div
function takeshot() {
let div =
document.getElementById('photo');
// Use the html2canvas
// function to take a screenshot
// and append it
// to the output div
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
</script>
</body>
</html>
La captura de pantalla se puede guardar haciendo clic derecho sobre ella y guardándola como una imagen, como se muestra a continuación.
Producción:
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por shubhampatni88 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA