Generate barcode from text and convert it to base64

Question

Does someone knows a tool to generate barcode image (preferably code 39) from a string and converts it to base64 string, something to use like this:

var text = "11220"; // text to convert
var base64Str = textToBase64Barcode(text); // function to convert its input 
        // to an image formatted in a base64 string like : "data:image/jpeg;base64..."

?

This library may be useful; https://github.com/lindell/JsBarcode — Ron Sims II, Feb 25 '16 at 20:11
There are barcode fonts, also you can build an image using divs or spans with appropriate CSS. — RobG, Feb 25 '16 at 20:51

score 45 · Accepted Answer · answered Feb 29 '16 at 15:33

45

Using JsBarcode this function will do what you want.

function textToBase64Barcode(text){
  var canvas = document.createElement("canvas");
  JsBarcode(canvas, text, {format: "CODE39"});
  return canvas.toDataURL("image/png");
}

answered Feb 29 '16 at 15:33

Lindell

701
6
6

You just saved my day! :) Thanks a lot! – Naween Niroshan Jan 16 '19 at 22:07
stack overflow needs someone like you. – Gabriel Lam Dec 14 '22 at 18:15

score 3 · Answer 2 · answered Oct 29 '19 at 10:55

if you need this function in node.js side, you can try below

const bwipjs = require('bwip-js');

function textToBarCodeBase64 (text) {
    return new Promise((resolve, reject) => {
        bwipjs.toBuffer({
            bcid: 'code128',
            text: text,
            scale: 3,
            height: 10,
            includetext: true,
            textxalign: 'center'
        }, function(error, buffer) {
            if(error) {
                reject(error)
            } else {
                let gifBase64 = `data:image/gif;base64,${buffer.toString('base64')}`
                resolve(gifBase64)
            }
        })
    })
}

about bwip-js see bwip-js for more details

score 2 · Answer 3 · answered Oct 29 '21 at 06:43

2

From my perspective (frontend), the alternative option is bwipjs

const canvas = document.createElement('canvas');

    const dataURL = bwipjs
      .toCanvas(canvas, {
        bcid: 'upca', // Barcode type
        text: barcode,
        scale: 3, // 3x scaling factor
        height: 20, // Bar height, in millimeters,
        border: 5,
        includetext: true, // Show human-readable text
      })
      .toDataURL('image/png');

answered Oct 29 '21 at 06:43

Will

325
2
9

How can you use it in JS/TS. I get an error `Property 'toCanvas' does not exist on type 'typeof BwipJs'.` when running `yarn unit-test`. – Sardar Faisal Sep 01 '23 at 10:54

Generate barcode from text and convert it to base64

3 Answers3

Linked