Ionic 3：使用藍牙打印機打印圖像

Question

我目前正在努力使用我們的 Ionic3 應用程序。 我似乎無法找到如何使用 BT 打印機和藍牙串行插件打印圖像。 打印文本就好了。

我們正在使用此文檔（由我的前同事找到）驅動程序命令文檔測試 RPP02N-BU 打印機，但我無法獲得

選擇位圖模式

工作。

我們首先將上傳的圖像調整為不超過 300 像素，然后將其轉換為黑白。 打印時，我們迭代圖像並創建二進制字符串，然后將其轉換為字節。 這些字節跟在 SELECT BIT IMAGE MODE 命令之后。

我們的代碼（在 TypeScript 中）如下：

/**
 * Image to printer command
 * @param image 
 */
public static getImagePrintData(image: HTMLImageElement): Buffer {
    // Initialize list of commands
    let command: number[] = [ 0x1b, 0x2a, 33, 255, 3 ];

    // Get image bytes
    let bytes = this.getImageBytes(image);

    // Add bytes to command
    bytes.forEach((byte) => command.push(byte));

    // Return command
    return new Buffer(command);
}

/**
 * Get image bytes
 * @param image 
 */
private static getImageBytes(image: HTMLImageElement): number[] {
    // Init result
    let result = [];

    // Create image padding
    let padding = this.getZeroBytePadding(image.width);

    // Get image context
    let ctx = this.getImageContext(image);

    // Iterate image pixels
    for (let y = 0; y < image.height; y++) {
        // Init row string
        let row = "";

        // Go through row of pixels
        for (let x = 0; x < image.width; x++) {
            // Get pixel
            let pixel = ctx.getImageData(x, y, 1, 1).data;

            // Get rgb value
            let rgbValue = pixel[0] + pixel[1] + pixel[2];

            // Add 0 or 1 based on value
            row = row + (rgbValue > 0 ? 0 : 1);
        }

        // Add padding
        row = row + padding;

        // Now we need to split the row into byte chunks
        let byteChunks = row.match(/.{1,8}/g);

        // Now add those byte chunks to result
        byteChunks.forEach((chunk) => result.push(parseInt(chunk, 2)));
    }

    // Return result
    return result;
}

/**
 * Get zero byte padding
 * @param value 
 */
private static getZeroBytePadding(value: number): string {
    // Init padding
    let padding = "";

    // Get difference
    let diff = value % 8;

    // Create padding
    for (let i = 0; i < (8 - diff); i++) {
        padding = padding + "0";
    }

    // Return result
    return padding;
}

/**
 * Get image context
 * @param image 
 */
private static getImageContext(image: HTMLImageElement): CanvasRenderingContext2D {
    // Prepare canvas to draw image into
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    // Context
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);

    return ctx;
}

然后將命令發送到 BT 打印機：

// Initialize image
let image = new Image();
// Set data
image.src = options.logo.content;
// Get image print data
let imagePrintData = PrinterUtils.getImagePrintData(image);

// Push image to print queue
printQueue.push(this.bluetoothUtility.write(imagePrintData));

生成的圖像如下所示：

而原文是：

Answer 1

所以我終於成功了。 我使用了此代碼的一部分： https : //github.com/song940/node-escpos並設法打印徽標，甚至居中。

以下代碼在 TypeScript 中

我創建了 ESCPOSImage 類：

/**
 * RGB interface
 */
interface IRGB {
    r: number;
    g: number;
    b: number;
    a: number;
}

/**
 * ESCPOS image
 */
export class ESCPOSImage {

    // Data
    private data: number[] = [];

    // Width
    private width: number = 0;

    // Height
    private height: number = 0;

    /**
     * Constructor
     * @param image 
     */
    constructor(image: HTMLImageElement) {
        // Set width 
        this.width = image.width;

        // Set height
        this.height = image.height;

        // Get image context
        let ctx = this.getContext(image);

        // Get data
        this.data = this.getBitData(ctx);
    }

    /**
     * Get bit data
     * @param ctx 
     */
    private getBitData(ctx: CanvasRenderingContext2D): number[] {
        // Init result
        let result: number[] = [];

        // Iterate rows
        for (let y = 0; y < this.height; y++) {
            // Iterate columns
            for (let x = 0; x < this.width; x++) {
                // Get pixel
                let pixel = ctx.getImageData(x, y, 1, 1).data;

                // Get rgb
                let rgb = this.getRGB(pixel);

                // Get rgb value
                let value = rgb.r + rgb.g + rgb.b;

                // Add bit to result
                result.push(value > 0 ? 0 : 1);
            }
        }

        // Return result
        return result;
    }

    /**
     * Get image context
     * @param image 
     */
    private getContext(image: HTMLImageElement): CanvasRenderingContext2D {
        // Create canvas
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;

        // Set context
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);

        // Return context
        return context;
    }

    /**
     * Get RGB
     * @param pixel 
     */
    private getRGB(pixel: any): IRGB {
        // Return RGB
        return {
            r: pixel[0],
            g: pixel[1],
            b: pixel[2],
            a: pixel[3]
        }
    }

    /**
     * To raster
     */
    public toRaster() {
        // Init result
        let result = [];

        // Get width and height
        let width = this.width;
        let height = this.height;

        // N block lines
        let n = Math.ceil(width / 8);

        // Iterate
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < n; x++) {
                for (let b = 0; b < 8; b++) {
                    let i = x * 8 + b;

                    if (result[y * n + x] === undefined) {
                        result[y * n + x] = 0;
                    }

                    let c = x * 8 + b;

                    if (c < width) {
                        if (this.data[y * width + i]) {
                            result[y * n + x] += (0x80 >> (b & 0x7));
                        }
                    }
                }
            }
        }

        // Return result
        return {
            data: result,
            width: n,
            height: height
        };
    }   
}

該類實現了 toRaster 方法，稍后在 ESCPOSPrinter 類中使用該方法：

/**
 * ESCPOS printer
 */
export class ESCPOSPrinter {

    // Buffer
    private buffer: Buffer;

    /**
     * Constructor
     * @param buffer 
     */
    constructor(buffer: Buffer) {
        // Init buffer
        this.buffer = buffer;
    }

    /**
     * Write buffer
     * @param buffer 
     */
    private write(buffer: Buffer) {
        this.buffer = Buffer.concat([this.buffer, buffer]);
    }

    /**
     * Print raster
     * @param image 
     * @param mode 
     */
    public raster(image: ESCPOSImage, mode: string = 'normal') {
        // Get header
        let header = COMMANDS.S_RASTER_N;

        // Get raster
        let raster = image.toRaster();

        // Set alignment
        this.align('center');

        // Write header
        this.write(new Buffer(header));
        this.write(new Buffer([raster.width, 0]));
        this.write(new Buffer([raster.height, 0]));
        // Write data
        this.write(new Buffer(raster.data));
    }

    /**
     * Print line
     */
    public printLn() {
        this.write(new Buffer([COMMANDS.CTL_CR, COMMANDS.CTL_LF]));
    }

    /**
     * Align 
     * @param alignment ['left', 'center', 'right'] 
     */
    public align(alignment: string = 'left') {
        // Create alignment dictionary
        const aligments = {
            ['left']: COMMANDS.TXT_ALIGN_LT,
            ['center']: COMMANDS.TXT_ALIGN_CT,
            ['right']: COMMANDS.TXT_ALIGN_RT
        }

        // Write alignment
        this.write(new Buffer(aligments[alignment]));
    }

    /**
     * Get buffer
     */
    public getBuffer(): Buffer {
        return this.buffer;
    }
}

最后，一起使用：

// Create image
let image = new Image();

// Set data
image.src = options.logo.content;

// Create ESCPOS image
let escposImage = new ESCPOSImage(image);

// Initialize ESCPOS printer
let escposPrinter = new ESCPOSPrinter(new Buffer([]));

// Print image
escposPrinter.raster(escposImage);

// And also print new line
escposPrinter.printLn();

// Assign data to print queue
printData = Buffer.concat([escposPrinter.getBuffer(), printData]);

然后將數據分成數據包並使用藍牙串行插件的寫入方法發送。

如果您對命令感到疑惑：

TXT_ALIGN_LT: [0x1b, 0x61, 0x00],     // Left justification
TXT_ALIGN_CT: [0x1b, 0x61, 0x01],     // Centering
TXT_ALIGN_RT: [0x1b, 0x61, 0x02],     // Right justification

S_RASTER_N: [0x1d, 0x76, 0x30, 0x00], // Set raster image normal size

CTL_LF: [0x0a], // Print and line feed
CTL_CR: [0x0d], // Carriage return

希望這可以幫助某人。 干杯

Answer 2

測試2

嗨菲利普馬蒂斯

我嘗試與您的班級一起打印您的 StarWars 圖像，但結果喜憂參半。 根據我的理解，您嘗試重用 node-escpos 您是否找到了一種方法可以訪問所有 packags/printer/index.js 功能？

像：

printer
  .font('a')
  .align('ct')
  .style('bu')
  .size(1, 1)
  .text('The quick brown fox jumps over the lazy dog')
  .text('敏捷的棕色狐狸跳過懶狗')
  .barcode('1234567', 'EAN8')
  .table(["One", "Two", "Three"])
  .tableCustom([
    { text:"Left", align:"LEFT", width:0.33 },
     { text:"Center", align:"CENTER", width:0.33},
     { text:"Right", align:"RIGHT", width:0.33 }
  ])
  .qrimage('https://github.com/song940/node-escpos', function(err){
     this.cut();
     this.close();
  });

Answer 3

我能夠使用外部庫打印到 escpos 兼容打印機。

請遵循以下指南：

設備：三星 Tab A 10.1
打印機：MUNBYN POS
Ionic 4、Angular 8、Ionic 原生藍牙串口

Ionic 3：使用藍牙打印機打印圖像

問題描述

3 個解決方案

解決方案1
5 已采納 2017-10-25 07:26:12

解決方案2
0 2021-04-15 20:56:52

解決方案3
0 2021-04-16 02:37:30

Ionic 3：使用藍牙打印機打印圖像

問題描述

3 個解決方案

解決方案1 5 已采納 2017-10-25 07:26:12

解決方案2 0 2021-04-15 20:56:52

解決方案3 0 2021-04-16 02:37:30

解決方案1
5 已采納 2017-10-25 07:26:12

解決方案2
0 2021-04-15 20:56:52

解決方案3
0 2021-04-16 02:37:30