Dom-to-image es una biblioteca que puede convertir un nodo DOM arbitrario en una imagen vectorial (SVG) o raster (PNG), escrita en JavaScript.

Cómo capturar una imagen de un elemento DOM con javascript

Aunque si no ha necesitado dicha característica en uno de sus proyectos, encontrará esta característica realmente interesante. Esta biblioteca, como su nombre lo describe, generará una imagen o svg desde un nodo del documento en formato Base64. Sí, cada etiqueta html , lo que quieras, se puede convertir en una imagen con javascript sin crear llamadas externas a ningún servidor ni nada en cada navegador moderno.

Requisitos

Para lograr esta tarea, vamos a depender de la biblioteca Javascript dom-to-image. Dom-to-image es una biblioteca que puede convertir un nodo DOM arbitrario en una imagen vectorial (SVG) o raster (PNG o JPEG), escrita en JavaScript. Está basado en domvas de Paul Bakaus y ha sido completamente reescrito, con algunos errores corregidos y algunas características nuevas (como soporte de imágenes y fuentes web) agregadas.

Puede obtener el script usando NPM:

npm install dom-to-image

O simplemente descargue el archivo .zip (o navegue) en el repositorio oficial de Github .

Cómo funciona

Esta biblioteca utiliza una función de SVG que permite tener contenido HTML arbitrario dentro de la <foreignObject>etiqueta. Entonces, para renderizar ese nodo DOM por usted, se siguen los siguientes pasos:

  1. Clone el nodo DOM original de forma recursiva.

  2. Calcule el estilo para el nodo y cada subnodo y cópielo en el clon correspondiente y no olvide volver a crear los pseudoelementos, ya que no se clonan de ninguna manera.

  3. Incrustar fuentes web:

    • encontrar todas las declaraciones @font-face que podrían representar fuentes web

    • analizar URL de archivos, descargar archivos correspondientes

    • codificación base64 y contenido en línea como data:URL

    • concatenar todas las reglas CSS procesadas y ponerlas en un <style>elemento, luego adjuntarlo al clon

  4. Insertar imágenes:

    • incrustar URL de imagen en <img>elementos

    • imágenes en línea utilizadas en la backgroundpropiedad CSS, de manera similar a las fuentes

  5. Serialice el nodo clonado en XML.

  6. Envuelva XML en la <foreignObject>etiqueta, luego en el SVG, luego conviértalo en una URL de datos.

  7. Opcionalmente, para obtener contenido PNG o datos de píxeles sin procesar como un Uint8Array, cree un elemento de imagen con el SVG como fuente y renderícelo en un lienzo fuera de la pantalla, que también ha creado, luego lea el contenido del lienzo.

Implementación

Todas las funciones de nivel superior aceptan un nodo DOM y opciones de representación, y devuelven promesas, que se cumplen con las URL de datos correspondientes.

Elemento a PNG

Para crear una imagen PNG, use el método domtoimage.toPng:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

<script>
    var node = document.getElementById('my-node');

    domtoimage.toPng(node).then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    }).catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
</script>

Elemento a JPEG

Para crear una imagen JPEG, use el método domtoimage.toJpeg:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

<script>
    var node = document.getElementById('my-node');
    var options = {
        quality: 0.95 
    };

    domtoimage.toJpeg(node, options).then(function (dataUrl) {
        // Do something with the dataURL (data:image/jpeg;base64,i........)
    });
</script>

Elemento a blob

Si necesitas recuperar un Blob en lugar de una cadena Base64, puede usar el método domtoimage.toBlob que devuelve un Blob en PNG desde el DOM renderizado:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

<script>
    var node = document.getElementById('my-node');
    
    domtoimage.toBlob(node).then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });
</script>

En el ejemplo anterior, usamos el complemento FileSaver que le permite descargar un archivo (desde un Blob) en el navegador con Javascript.

Ejemplo vivo

Pruébelo y juegue con el siguiente violín, se agregará una imagen base64 al documento cada vez que haga clic en el botón Crear. Cambie el contenido del área de texto para ver el resultado:

Se probó en los últimos Chrome y Firefox (49 y 45 respectivamente en el momento de escribir este artículo), y Chrome se desempeñó significativamente mejor en grandes árboles DOM, posiblemente debido a su soporte SVG más eficiente y al hecho de que admite propiedades CSSStyleDeclaration.cssText. Internet Explorer no es (y no será) compatible, ya que no es compatible con <foreignObject> etiquetas SVG.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores