Writing images using this lib

[andre-luiz1997]

I am trying to print a simple image using a thermal printer that is connected using this plugin (@capacitor-community/bluetooth-le).
Although I couldn't find much information on the internet, I have ended with this function within my service:

async printImage(deviceId: string, serviceUuid: string, characteristicUuid: string, imageUrl: string) {
    try {
      const imageData = await this.fetchImage(imageUrl).toPromise();
      if (!imageData) {
        console.error('Error downloading image.');
        return;
      }
      // Carrega a imagem
      const img = new Image();
      img.src = `data:image/png;base64,${imageData.base64}`;
      await img.decode();
      // Converte a imagem para bitmap
      const bitmapData = this.imageToBitmap(img);
      if (!bitmapData) return;
      // FROM HERE I HAVE USED AI TO GENERATE
      const data = new Uint8Array([
        0x1B, 0x40, // Inicializa
        0x1B, 0x2A, 0x29, // Seleciona raster gráfico
        0x1B, 0x33, 0x18, // Define largura (24 pixels)
        0x1B, 0x33, 0x08, // Define altura (8 pixels)
        // ... outros comandos para definir resolução, cor, etc.
        ...bitmapData, // Dados da imagem
        0x1B, 0x32, // Imprime e alimenta papel
      ]);
      await BleClient.write(deviceId, serviceUuid, characteristicUuid, new DataView(data.buffer));
    } catch (error) {
      console.error('Error printing image:', error);
    }
  }

After the bitmapData, I simply cannot print the image, since I couldn't find much info on that. I have also tried to combine this lib to manipulate the image and pass it as the write input: https://github.com/NielsLeenheer/ThermalPrinterEncoder

I always get an error on BleClient.write, sometimes "Writing characteristic failed with status code 200." and other "Writing characteristic failed with status code 201." What could it be?

The implementation of imageToBitmap is below:

imageToBitmap(img: HTMLImageElement): Uint8Array | undefined {
    // Criar um canvas com as mesmas dimensões da imagem
    const canvas = document.createElement('canvas');
    canvas.width = 24;
    canvas.height = 8;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // Desenhar a imagem no canvas
    ctx.drawImage(img, 0, 0);

    // Obter os dados da imagem em formato RGBA
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // Converter para bitmap monocromático (simplificado)
    const bitmapData = new Uint8Array(Math.ceil(canvas.width / 8) * canvas.height);
    for (let y = 0; y < canvas.height; y++) {
      for (let x = 0; x < canvas.width; x++) {
        const index = y * canvas.width + x;
        const grayscale = (imageData.data[index * 4] + imageData.data[index * 4 + 1] + imageData.data[index * 4 + 2]) / 3;
        const bitIndex = x % 8;
        const byteIndex = Math.floor(x / 8);
        if (grayscale > 128) {
          bitmapData[y * Math.ceil(canvas.width / 8) + byteIndex] |= (1 << (7 - bitIndex));
        }
      }
    }

    return bitmapData;
  }