Si desea tomar una captura de pantalla de una parte o la totalidad de su página web usando JavaScript, es posible que se quede atascado. Crear una imagen a partir de un elemento HTML puede parecer un desafío, ya que no existe una forma directa de hacerlo en JavaScript.

Afortunadamente, esta no es una tarea imposible y, de hecho, es bastante fácil con las herramientas adecuadas. Usando la biblioteca de html a imagen, crear imágenes de nodos DOM es tan simple como una sola llamada de función.

¿Cómo funciona html a imagen?

los html a imagen biblioteca produce una imagen en forma de una URL de datos base64. Admite varios formatos de salida, incluidos PNG, JPG y SVG. Para realizar esta conversión, la biblioteca utiliza este algoritmo:

  1. Cree un clon del elemento HTML de destino, sus elementos secundarios y cualquier pseudoelemento adjunto.
  2. Copie el estilo de todos los elementos clonados e incruste el estilo en línea.
  3. Incruste las fuentes web relevantes, si las hay.
  4. Incruste cualquier imagen presente.
    5. instagram viewer
  5. Convierta el nodo clonado en XML y luego en SVG.
  6. Use el SVG para crear una URL de datos.

Advertencias y limitaciones

Aunque html-to-image es una gran biblioteca, no es perfecta. Tiene algunas advertencias, a saber:

  • La biblioteca no funcionará en Internet Explorer o Safari.
  • Si el HTML que intenta convertir incluye un elemento de lienzo contaminado, la biblioteca fallará. Como MDN explica, incluir datos no aprobados por CORS en su elemento de lienzo lo contaminará.
  • Debido a que los navegadores establecen límites en el tamaño máximo de una URL de datos, existen límites en el tamaño del HTML que la biblioteca puede convertir.

Uso de la biblioteca

Para probar la biblioteca, lo primero que debe hacer es crear un directorio de proyecto en su máquina local. Luego, instale html-to-image en ese directorio usando el administrador de paquetes npm. Aquí está el comando de terminal para instalarlo:

npm Instalar en pc--guardar html en imagen

También debe instalar un paquete de JavaScript para que sea un poco más fácil usar la biblioteca. los esconstruir bundler puede ayudar a empaquetar módulos de nodos en scripts compatibles con la web.

npm Instalar en pc esconstruir

Eso es todo lo que necesitas para instalar. A continuación, cree un archivo llamado índice.html en su directorio y servirlo con un servidor web de su elección. Ponga el siguiente código en index.html:

<!doctype html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="UTF-8">
<metanombre="mirador"
 contenido="ancho = ancho del dispositivo, escalable por el usuario = no, escala inicial = 1.0, escala máxima = 1.0, escala mínima = 1.0">
<meta http-equiv="Compatible con X-UA" contenido="es decir = borde">
<título>Documento</title>
<estilo>
 .colorido-div {
 relleno: 3 rem;
 color blanco;
 imagen de fondo: degradado lineal (a la derecha, amarillo, violeta rebeca);
 borde: 1px negro sólido;
 margen: 1rem automático;
 tamaño de fuente: 3rem;
 familia de fuentes: cursiva;
 }
</style>
</head>
<cuerpo>
<clase div="colorido-div">
 yo'voy a estar en una captura de pantalla!
</div>
<clase div="texto largo">
 yo'm un ejemplo de un párrafo suficientemente detallado que
 ilustra que tomar capturas de pantalla en JavaScript es
 realmente muy fácil, por las siguientes razones:
<ul>
<li>Razón 1</li>
<li>Razón 2</li>
<li>Razón 2</li>
</ul>
</div>
<secuencia de comandos src="fuera.js"></script>
</body>
</html>

Este código crea dos elementos en la página: un div con un fondo degradado y algo de texto y una lista desordenada dentro de otro div. A continuación, escribirá JavaScript para convertir estos elementos en imágenes. Coloque el siguiente código en un nuevo archivo llamado script.js:

importar * como html a imagen de "html a imagen";
elementos constantes = ['.colorful-div', '.texto largo']


elementospara cada((elemento, ind) => {
constante nodo = documento.querySelector (elemento)
html a imagen.toPng(nodo)
 .después(función (URL de datos) {
dejar imagen = nuevo Imagen();
 img.src = dataUrl;
documento.cuerpo.añadir Niño(imagen);
 })
 .captura(función(error){
 consola.error('¡Huy! Algo salió mal!');
consola.log (error)
 });
})

Este código hace algunas cosas:

  • Importa la biblioteca de html a imagen.
  • Crea una matriz hecha de selectores CSS que apuntan a los dos elementos.
  • Crea una imagen PNG en forma de URL de datos de cada elemento de la matriz.
  • Crea una etiqueta img y establece su atributo src en la URL de datos, creando copias de imagen de los dos elementos.

Ahora use esbuild para generar el archivo incluido (fuera.js) a las que hace referencia index.html ejecutando lo siguiente en su terminal:

 ./node_modules/.bin/esbuild script.js --paquete --outfile=out.js

En este punto, así es como debería verse index.html en su navegador:

Aunque las copias tienen exactamente el mismo aspecto que los originales, en realidad son elementos de imagen. Puedes confirmar esto por abriendo tus herramientas de desarrollo e inspeccionándolos.

Esta biblioteca también funciona con marcos de JavaScript. los documentación de html a imagen contiene instrucciones sobre cómo generar otros formatos de imagen. También incluye un ejemplo que muestra cómo usar la biblioteca con React.

Tomar capturas de pantalla con JavaScript es fácil

No existe un método de JavaScript nativo para crear imágenes a partir de elementos HTML o tomar capturas de pantalla del DOM. Sin embargo, con la ayuda de bibliotecas y servicios como html-to-image, se convierte en una tarea sencilla.

Hay otras formas de lograr resultados similares, como la biblioteca wkhtmltoimage. Puede usar esta herramienta de código abierto para tomar capturas de pantalla de una página web completa.