Printing a logo on a Custom TG2480H printer

Question

I'm printing a receipt using the Custom TG2480-H printer. I've got all of the receipt working except for the logo.

I've got a monochrome .bmp file that represents the logo and has the right dimenions.

I'm retrieving the file, using different response types:

this.http.get('/assets/images/brand/logo-bnw.bmp', {
  responseType: ResponseContentType.Blob
}).subscribe((response: Response) => {
  console.log('Blob bytes', this.kiowarePrintService.getBytesFromText(response.text()));
});
this.http.get('/assets/images/brand/logo-bnw.bmp', {
  responseType: ResponseContentType.Text
}).subscribe((response: Response) => {
  console.log('Text bytes', this.kiowarePrintService.getBytesFromText(response.text()));
});
this.http.get('/assets/images/brand/logo-bnw.bmp', {
  responseType: ResponseContentType.ArrayBuffer
}).subscribe((response: Response) => {
  console.log('ArrayBuffer bytes', this.kiowarePrintService.getBytesFromText(response.text()));
});

Here's the documentation on ResponseContentType and the different values it can have.

This is the code for getBytesFromText:

getBytesFromText(text: string) {
    const bytes: number[] = [];
    for (let i = 0; i < text.length; i++) {
      bytes.push(text.charCodeAt(i));
    }
    return bytes;
  }

Converting the responses to bytes prints these values:

Blob bytes (2) [123, 125]

Text bytes (951) [66, 77, 65533, 3, 0, 0, 0, 0, 0, 0, 62, 0, 0, 0, 40, 0, 0, 0, 120, 0, 0, 0, 56, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 65533, 3, 0, 0, 65533, 14, 0, 0, 65533, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533…]

ArrayBuffer bytes (479) [19778, 958, 0, 0, 0, 62, 0, 40, 0, 120, 0, 56, 0, 1, 1, 0, 0, 896, 0, 3780, 0, 3780, 0, 0, 0, 0, 0, 0, 0, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 255, 65535, 65535, 65535, 65535, 65535…]

These all seem to be wrong, the amount of Blob bytes is way too low, and the other two both contain numbers that are bigger than bytes (>255).

I've tried sending these bytes to the printer anyway and came up with the following:

• Blob prints nothing

• Text

• ArrayBuffer

EDIT: Tried to add 'content-type': 'image/bmp' header:

    const headers: Headers = new Headers({'Content-Type': 'image/bmp'});
    const options: RequestOptions = new RequestOptions({headers: headers});
    this.http.get('/assets/images/brand/logo-bnw.bmp', options).subscribe((response: Response) => {
      console.log('image/bmp bytes', this.kiowarePrintService.getBytesFromText(response.text()));
    });

Logs this:

image/bmp bytes (951) [66, 77, 65533, 3, 0, 0, 0, 0, 0, 0, 62, 0, 0, 0, 40, 0, 0, 0, 120, 0, 0, 0, 56, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 65533, 3, 0, 0, 65533, 14, 0, 0, 65533, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 65533, 0, 65533, 65533, 65533, 65533, 65533, 65533…]

Which looks like it's the same as the text response

Answer 1

You're using response.text() for ALL of the return types. In the case of binary data, you should keep it as a blob. You can access the underlying bytes without converting to text by using

response.arrayBuffer()

That should give you the correct byte array that you're expecting.

This question is also relevant: Get Image or byte data with http

The top answer takes the approach of doing:

var blob = new Blob([new Uint8Array(response._body)]