Thermal printer

Image printing on Thermal printer

When printing receipts on thermal printers (ESC POS) sometimes it is needed to print images of any type, for example, to print the customer’s logo and so on.

Image printing in thermal printer receipt

In this post I will show you how to print any kind of images: you will be able to print local images, base64 images and internet images.

Please note that we will print images on thermal printer by using JavaScript, but once you learn how to do it with JS you will be able to do it from another programming languages.

Setup environment

To send ESC POS commands to the POS printer we need something to start the communication. That’s why I have developed a free plugin that creates a server on the user’s PC.

I have explained it in the next post, I encourage you to read it, download the plugin and share your printer:

For the next section I assume that you have already printed the “hello world” receipt in your thermal printer.

Print image by URL

Let’s start learning how to send a URL-based image to a thermal printer. This must be a public URL. It could be from a public internet site:

example.com/image.jpg

Or it can be from your domain, for example:

yourdomain.com/assets/logo.png

It can even be from localhost:

http://localhost/project/image.jpg

In the end, it should be a valid internet URL. To do this, we invoke the function DescargarImagenDeInternetEImprimir.

Just remember that the plugin will download the image and leave a trace of the connection, assuming that the URL destination is a valid image. Therefore, only use images from sites you trust.

Local image

A local image is the one that is located on the computer where the plugin is installed, and its location is something like C:\users\your_user\logo.png.

To print a local image, we invoke the function CargarImagenLocalEImprimir.

Remember that you can invoke this method multiple times.

Base64 image

The thermal printer image printing plugin also allows printing images in base64 format, which means you can send the image as a string.

To print a base64 image from the plugin, whether with JS, Python, Java, or any other language, we call the ImprimirImagenEnBase64 function.

Full example: how to print images on thermal printer by using ESC POS commands

Now I’m going to print 3 images to demonstrate how to print images on a thermal printer from JavaScript.

In this example, I am taking the values from text fields, but you can define them from anywhere.

const imprimirImagenes = async (nombreImpresora) => {
    const conector = new ConectorPluginV3(URLPlugin);
    conector.Iniciar();
    const url = $url.value;
    const base64 = $base64.value;
    const local = $local.value;
    if (url) {
        conector.EscribirTexto("Imagen de URL: " + url);
        conector.Feed(1);
        conector.DescargarImagenDeInternetEImprimir(url, ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL, 160)
        conector.Iniciar(); //Nota: esto solo es necesario en ocasiones, por ejemplo en mi impresora debo hacerlo siempre que acabo de imprimir una imagen
        conector.Feed(1);
    }
    if (base64) {
        conector.EscribirTexto("Imagen en base64: ");
        conector.Feed(1);
        conector.ImprimirImagenEnBase64(base64, ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL, 160);
        conector.Iniciar(); //Nota: esto solo es necesario en ocasiones, por ejemplo en mi impresora debo hacerlo siempre que acabo de imprimir una imagen
        conector.Feed(1);
    }

    if (local) {
        conector.EscribirTexto(`Imagen local: ` + local);
        conector.Feed(1);
        conector.CargarImagenLocalEImprimir(local, ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL, 160);
        conector.Iniciar(); //Nota: esto solo es necesario en ocasiones, por ejemplo en mi impresora debo hacerlo siempre que acabo de imprimir una imagen
        conector.Feed(1);
    }
    const respuesta = await conector
        .imprimirEn(nombreImpresora);
    if (respuesta === true) {
        alert("Impreso correctamente");
    } else {
        alert("Error: " + respuesta);
    }
}

Please note that when you call a function to print an image, the arguments are:

  1. source, a string that could be a URL, image path or base64
  2. image size which can be ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL and it’s not the image width, but an internal resize config in the thermal printer
  3. image width which must be divisible by 8

Also, sometimes it is necessary to call Feed(1) before printing an image, and also sometimes we need to call Iniciar (to reset printer to power-on status) after we print an image.

As always, remember that you can try and make tests combining available functions.

You have already seen the output when the previous code is executed. You can try the online demo here: https://parzibyte.github.io/ejemplos-javascript-plugin-v3/imagenes.html

Oh, and you can also read the source code: https://github.com/parzibyte/ejemplos-javascript-plugin-v3/blob/main/imagenes.html

About image formats

The plugin supports only JPG and PNG images. Remember that you can change the width, but it must always be a multiple of 8.

Keep in mind that the printer will only print in black and white, and it will consider some colors as white if they are very light. That’s why if you want optimal results, you should create the image in black and white from the beginning.

However, the best way is to try with your own images and draw conclusions. Remember that you can find everything you need in this post.

By the way, you can also check out the Bluetooth thermal printer plugin for Android.


I am available for hiring if you need help! I can help you with your project or homework feel free to contact me.
If you liked the post, show your appreciation by sharing it, or making a donation

parzibyte

Freelancer programmer ready to work with you. Web, mobile and desktop applications. PHP, Java, Go, Python, JavaScript, Kotlin and more :) https://parzibyte.me/

Entradas recientes

Receipt designer for thermal printers – Free and open source

In the last months I have been working on a ticket designer to print on…

12 months hace

JavaScript: store and read files with the Origin Private File System

In this post you will learn how to use the Origin Private File System with…

1 year hace

JavaScript: download file with fetch

In this post you will learn how to download a file in the background using…

1 year hace

SQLite3 with vanilla JavaScript and OPFS – Hello world

In this post I will show you how to use SQLite3 directly in the web…

1 year hace

Python Thermal Printing: A Comprehensive Guide for Printing on Thermal Printers

In this tutorial, we'll explore how to effortlessly print receipts, invoices, and tickets on a…

1 year hace

Print diacritic text in thermal printer – ESC POS commands

In this post I will show you how to print spanish text, text with accents…

1 year hace

Esta web usa cookies.