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.

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:

Print ticket in thermal printer directly from browser

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.