DEV Community

Masui Masanori
Masui Masanori

Posted on

[TypeScript][Express][JsBarcode] Generate 1D barcode images

Intro

This time, I will try generating barcode images by JsBarcode.
Because I want to generate them by Web API, I will use Node.js and Express.js.

Environments

  • Node.js ver.16.11.0
  • TypeScript ver.4.4.4"
  • canvas ver.2.8.0
  • dpi-tools ver.1.0.7
  • Express ver.4.17.1
  • jsBarcode ver.3.11.5

Generate barcode images

I can use jsBarcode in Node.js projects.
To draw barcode images, I have to add node-canvas.

barcodeGenerator.ts

import { Canvas } from 'canvas';
import JsBarcode from 'jsbarcode';

function generateBarcode(value: string): Buffer {
    const canvas = new Canvas(100, 100, "image");
    JsBarcode(canvas, value);
    return canvas.toBuffer();
}
Enter fullscreen mode Exit fullscreen mode

Image description

Options

I can add options.
I can set base options and specific options for specific barcode formats.

For example, "Code39" can choose adding checksum(Modulus43) or not by "mod43".

In TypeScript files, I can't add "mod43" directly.

barcodeGenerator.ts

...
function generateBarcode(value: string): Buffer {
    const canvas = new Canvas(100, 100, "image");
    JsBarcode(canvas, value, {
        // error
        mod43: true,
    });
    return canvas.toBuffer();
}
Enter fullscreen mode Exit fullscreen mode

So I create types and add them into options.

barcodeGenerator.ts

...
type Code39Options = {
    format: "CODE39",
    mod43: boolean,
};
function generateBarcode(value: string, options: Code39Options): Buffer {
    const canvas = new Canvas(100, 100, "image");
    JsBarcode(canvas, value, {
        // specific options
        ...options,
        // hide texts what are set under the barcode
        displayValue: false,
        // no white spaces
        margin: 0,
        // Set the width to twice the default
        width: 2,
        height: 100,
        // barcode color
        lineColor: "#000000",
    });
    return canvas.toBuffer();
}
Enter fullscreen mode Exit fullscreen mode

Image description

DPI

Because jsBarcode uses Canvas to create barcode images, their DPI are 72.
To save as more higher resolution, I use dpi-tools.

import { Canvas } from 'canvas';
import * as dpiTools from 'dpi-tools';
import JsBarcode from 'jsbarcode';

...
function generateBarcode(value: string, options: Code39Options|Code128Options|CodeItfOptions): Buffer {
    const canvas = new Canvas(100, 100, "image");
    JsBarcode(canvas, value, {
 ...
    });    
    return dpiTools.changeDpiBuffer(canvas.toBuffer(), 600);
}
Enter fullscreen mode Exit fullscreen mode

Image size

As in the sample above, I can set "width" and "height" in the options to change the image sizes.
But "width" unit value isn't inch or milimeter or pixel, and it is effected by the value length.

So when I want to change the image size, I will try do that after creating.

Get URL queris and create options

In Express projects, I can get URL queries by "req.query".

I can get the URL queries like below.

{
    "value": "0123456789",
    "checksum": true,
}
Enter fullscreen mode Exit fullscreen mode

So I get them and parse to create options.

index.ts

import { generateCode39 } from './barcodeGenerator';
import express from 'express';

const port = 3000;
const app = express();

app.get('/code39', (req, res) => {
    const stringifiedQueries = JSON.stringify(req.query);
    const params = getCode39Params(stringifiedQueries);
    res.statusCode = 200;
    res.end(generateCode39(params.value, params.checksum));
});
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});
function getCode39Params(stringifiedQueries: string): { readonly value: string, readonly checksum: boolean } {
    const parsedQueries = JSON.parse(stringifiedQueries);
    const value = getQueryText(parsedQueries.value);
    const checksumText = getQueryText(parsedQueries.checksum);
    let checksum = false;
    if(isNullOrEmpty(checksumText) === false) {
        checksum = (checksumText.toLowerCase() === "true");
    }
    return {
        value,
        checksum,
    };
}
function isNullOrEmpty(value: string|undefined|null): boolean {
    if(value == null) {
        return true;
    }
    if(value.length <= 0) {
        return true;
    }
    return false;
}
function getQueryText(value: any): string {
    if(value == null) {
        return "";
    }
    switch(typeof value) {
        case "string":
            return value;
        case "object":
            if(value.length != null &&
                    value.length > 0) {
                return value[0];
            }
            break;
    }
    return "";
}
Enter fullscreen mode Exit fullscreen mode

barcodeGenerator.ts

import { Canvas } from 'canvas';
import * as dpiTools from 'dpi-tools';
import JsBarcode from 'jsbarcode';

type Code39Options = {
    format: "CODE39",
    mod43: boolean,
};
export function generateCode39(value: string, checksum: boolean): Buffer {
    return generateBarcode(value.toUpperCase(), {
        format: "CODE39",
        mod43: checksum
    });
}
function generateBarcode(value: string, options: Code39Options): Buffer {
    const canvas = new Canvas(100, 100, "image");
    JsBarcode(canvas, value, {
        ...options,
        displayValue: false,
        margin: 0,
        width: 2,
        height: 100,
        lineColor: "#000000",
    });    
    return dpiTools.changeDpiBuffer(canvas.toBuffer(), 600);
}
Enter fullscreen mode Exit fullscreen mode

I also can generate other barcode types like "Code128", "ITF", and etc.

I also want to try generating 2D barcode images.

Discussion (0)