Convertir HTML a imagen en JavaScript
-
Utilice la biblioteca de JavaScript
html2canvaspara convertir HTML en imagen -
Use la biblioteca de JavaScript
dom-to-imagepara convertir HTML a imagen
Aprenderemos a representar el HTML como una imagen en este artículo. Significa que tomaremos la instantánea 2D de la página web, que contiene HTML, y la mostraremos en la página web o descargaremos la imagen.
Hemos utilizado bibliotecas de JavaScript externas para representar HTML en imágenes en los siguientes métodos.
Utilice la biblioteca de JavaScript html2canvas para convertir HTML en imagen
Hemos utilizado la biblioteca html2canvas en el siguiente ejemplo para convertir HTML en una imagen y representarla en la página web.
Por ejemplo, creamos dos elementos div con diferentes ID, my-div y ShowImage. Tomaremos la instantánea del elemento div con el id my-div y mostraremos la instantánea dentro del elemento div con el id ShowImage.
Además, hemos creado el elemento <button> y hemos agregado el evento onclick para eso. Cuando el usuario haga clic en el botón, llamará a la función convertToImage(), que convertirá HTML en imagen.
<body>
<div id="my-div">This is sample div element.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert</button>
</body>
Hemos aplicado algunos estilos a los elementos div en el CSS a continuación. Hemos establecido la altura, el ancho y el color de fondo para los elementos div utilizando las propiedades CSS.
Además, establecemos el margen para todos los elementos div para dejar algo de espacio alrededor.
div {
display: block;
margin: 20px;
}
#my-div {
height: 300px;
width: 300px;
background-color: red;
}
Para usar la biblioteca html2canvas, los usuarios deben descargarla a su computadora local desde (https://html2canvas.hertzen.com/). Después de eso, los usuarios pueden agregar la biblioteca al código HTML a través de la etiqueta <script> asignando la ruta correcta del archivo de la biblioteca al atributo src de la etiqueta <script>.
<script src="html2canvas.js" type="text/javascript"></script>
La función convertToImage() contiene el código JavaScript para convertir el HTML en imagen.
En el siguiente código de ejemplo, hemos accedido al elemento div con el id my-div usando su id en JavaScript y aplicado la función html2canvas para capturar la imagen de ese elemento HTML en particular. El canvas almacenará la imagen, y hemos añadido esa imagen al elemento div con el id ShowImage.
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
document.getElementById("ShowImage").appendChild(canvas);
});
}
</script>
Producción:
En la animación de salida anterior, los usuarios pueden ver que cuando hacemos clic en el botón convertir, se mostrará la nueva imagen del elemento <div> dentro del cuerpo del documento.
Además, podemos crear el enlace HTML para descargar y guardar localmente la imagen capturada.
Aquí, hemos creado el nuevo elemento <a> usando document.createElement("a"), y lo hemos almacenado dentro de la variable anchor. Además, hemos agregado el elemento <a> al cuerpo del documento usando document.body.appendChild(anchor).
A continuación, le hemos dado el nombre al archivo de imagen descargable usando anchor.download = "sample.jpg", y configuramos el atributo href para el ancla usando la propiedad toDataURL de la variable canvas. Además, hemos establecido el valor _blank para el atributo target de anchor para que la imagen se pueda descargar.
El resultado también muestra que cuando hacemos clic en el botón “convertir”, agrega la imagen del elemento div a la página web y descarga el mismo archivo de imagen a la computadora local.
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
var anchor = document.createElement("a");
document.body.appendChild(anchor);
document.getElementById("ShowImage").appendChild(canvas);
anchor.download = "sample.jpg";
anchor.href = canvas.toDataURL();
anchor.target = "_blank";
anchor.click();
});
}
</script>
Producción:
Use la biblioteca de JavaScript dom-to-image para convertir HTML a imagen
El siguiente código HTML es casi el mismo que el utilizado en el ejemplo anterior, que contiene dos elementos div con diferentes valores del atributo id.
<div id="my-div">Demo texts.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert to image</button>
El siguiente código CSS contiene el estilo del código HTML, y es casi el mismo que hemos usado dentro del código de ejemplo anterior.
div {
display: block;
margin: 20px;
}
#my-div {
height: 100px;
width: 100px;
background-color: blue;
}
Para usar la librería domtoimage, tenemos que descargarla localmente, o podemos usar su CDN. Aquí, los usuarios deben incrustar el siguiente CDN de la biblioteca domtoimage en la sección <head> del código HTML.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
En el siguiente código JavaScript, hemos accedido al elemento div usando su id y lo hemos almacenado en la variable elemento.
A continuación, usamos la biblioteca domtoimage para convertir el HTML en una imagen png. Hemos creado la nueva imagen vacía utilizando el constructor nueva imagen() y la hemos almacenado dentro de la variable nueva imagen.
Además, estamos asignando el valor de URL al atributo src de la variable newImage. Después de eso, agregaremos la nueva imagen a la página web.
Además, hemos usado el bloque catch para manejar los errores.
<script>
function convertToImage(){
var element = document.getElementById("my-div");
domtoimage
.toPng(element)
.then(function (URL) {
var newImg = new Image();
newImg.src = URL;
document.getElementById('ShowImage').appendChild(newImg);
})
.catch(function (error) {
console.error("error");
});
}
</script>
Producción:
Los usuarios pueden observar que estamos tomando la instantánea del div azul; cada vez que hagamos clic en el botón, nuestro código agregará una nueva instantánea del div azul al cuerpo del documento.
Artículo relacionado - HTML Image
- Agregar imagen en HTML desde una carpeta
- Haga clic o coloque el cursor sobre la imagen para ampliar en HTML
- HTML Agregar subtítulos a las imágenes
- Opacidad de imagen HTML
- Colocar texto junto a la imagen en HTML