Al imprimir tickets, recibos y todo tipo de contenido en las impresoras térmicas surge la necesidad de imprimir imágenes.

Por ejemplo, a veces es necesario imprimir el logotipo de la empresa o tienda de donde se imprime el ticket, pues le da una presentación agradable.

Hoy te enseñaré cómo usar JavaScript para imprimir imágenes en una impresora térmica. Las imágenes pueden ser locales o de una URL como localhost e incluso de internet.

Requisitos

Lo único que necesitas es descargar y ejecutar el plugin además de incluir la librería de conexión con JavaScript, básicamente lo que se hace en el siguiente post:

Nota: luego de que aprendas a hacerlo con JavaScript puedes usar otros lenguajes como Python, Java o cualquier otro que hable HTTP.

Imprimiendo imagen según URL

Con este método puedes hacer que el plugin descargue una imagen y la imprima. Esta URL puede ser de internet, por ejemplo:

ejemplo.com/imagen.jpg

O también puede ser de tu dominio, por ejemplo:

tudominio.com/assets/logo.png

Incluso puede ser de localhost:

http://localhost/proyecto/imagen.jpg

Al final debe ser una URL de internet válida. Para hacerlo invocamos a DescargarImagenDeInternetEImprimir.

Solo recuerda que el plugin va a descargar la imagen y va a dejar un rastro de la conexión, además de asumir que el destino de la URL es una imagen válida. Por ello solo usa imágenes de sitios en los que confíes.

Imagen local

Una imagen local es la que se encuentra en la computadora donde se encuentra el plugin y su ubicación es algo como C:\usuarios\tu_usuario\logo.png.

Para imprimir una imagen local invocamos a CargarImagenLocalEImprimir.

Recuerda que puedes invocar a este método varias veces.

Imagen en base64

El plugin de impresión de imágenes también permite imprimir imágenes en base64, es decir, puedes enviar la imagen como cadena.

Para imprimir una imagen en base64 desde el plugin ya sea con JS, Python, Java o cualquier otro invocamos a ImprimirImagenEnBase64.

Ejemplo completo

Ahora voy a imprimir 3 imágenes para demostrar cómo imprimir imágenes en una impresora térmica desde JavaScript.

En este ejemplo estoy tomando los valores de campos de texto pero puedes definirlos desde cualquier lugar.

See the gist on github.

La salida es la que se ve al inicio del post, pero la vuelvo a colocar aquí:

Si quieres puedes probar la demostración en el siguiente enlace, solo asegúrate de estar ejecutando el plugin: https://parzibyte.github.io/ejemplos-javascript-plugin-v3/imagenes.html

El código completo lo encuentras en GitHub: https://github.com/parzibyte/ejemplos-javascript-plugin-v3/blob/main/imagenes.html

Sobre los tamaños y formatos de imagen

El plugin soporta solo imágenes JPG y PNG. Recuerda que puedes cambiar el ancho pero el mismo debe ser múltiplo de 8 siempre.

No olvides que la impresora solo va a imprimir en blanco y negro, y considerará algunos colores como blanco si están en un nivel muy claro. Por ello es que si quieres algo óptimo debes crear la imagen en blanco y negro desde el inicio.

De cualquier modo, la mejor forma es probando con tus propias imágenes e ir sacando conclusiones. Recuerda que todo lo necesario lo encuentras en este post.

Por cierto, también puedes ver el plugin de impresoras térmicas Bluetooth para Android.