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

You are saying you have tried 'sending these bytes to the printer'. What method did you use? Did you use window.print() or you created other browser plugin? — wannadream, Jun 28 '17 at 14:55

score 2 · Accepted Answer · answered Jun 28 '17 at 14:58

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)]

Printing a logo on a Custom TG2480H printer

1 Answers1