Search code examples
node.jsexpresshtml5-canvasbarcode

Creating barcodes using JSBarCode

I am using JSBarCode to try and generate barcodes for assets. I need to be able to create a static barcode then I think I can get the dynamic part myself. My code so far is direct copy from the docs found on the link above. I would think the docs would give a working example to base my code off. Maybe I did the code wrong, I have the code below and I have done the NPM installs already for jsbarcode and canvas.

Server side code:

var JsBarcode = require('jsbarcode');
var Canvas = require("canvas");

var canvas = new Canvas();
JsBarcode(canvas, "Hello");
JsBarcode(".barcode").init();

HTML: 

<svg class="barcode"
  jsbarcode-format="upc"
  jsbarcode-value="123456789012"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold">
</svg>

I am getting an error when I try and run my node app. It is long and not really much use to me but hopefully one of you can understand it. Here it is:

/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84
        var selector = document.querySelectorAll(string);
                                ^

ReferenceError: document is not defined
    at querySelectedRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84:26)
    at getRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:37:10)
    at JsBarcode (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/JsBarcode.js:63:60)
    at Object.<anonymous> (/home/ubuntu/workspace/asset-management/server/index.js:31:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ubuntu/workspace/asset-management/server.js:4:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3

If you have suggestions on a better package that can read and generate custom barcodes please let me know so I can look into it.

Solution 

  • <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/ASL/AADeAAAA/gAAAAIAAAD+AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAh6QEAZKdo54AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAcjEDAghkmFUAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAckoDA0TA9lYAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAck4DAxY8F10AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAAAAAAAAQAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbkoDA3iPVH4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjUDAmZGozoAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASVICA62zYxMAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjUDAmZGozoAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbjUDAlvFFR8AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAAAAAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAARVICA/z3WM0AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAAAAAAAAQAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAUU4CA1nljTgAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbk4DAxdhexwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASVICA62zYxMAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajUDAvnk9E4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbjUDAlvFFR8AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAATU4CA7CME0sAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAckoDA0TA9lYAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAck4DAxY8F10AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajUDAvnk9E4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAATUoCA+Jw8kAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/ASL/AADeAAAA/gAAAAIAAAD+AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAh6QEAZKdo54AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASTUCAqHeHtMAAAAASUVORK5CYII=" width="5" height="70">

    I built a little barcode generator that does Code128 back in 2014. I'm blowing the dust off the code and putting it into circulation on codepen. It's 100% client side, plain vanilla Javascript. No jQuery, no libraries, no fonts, no server necessary. You can run it disconnected from a thumb drive. All the barcodes are generated by the browser.

    The old code should work in any browser that supports javascript, and it generates HTML "img" tags, so the result is something you can embed in a "div" and display on a page even if the client has JS turned off. It's all MIT license, so you are free to download and use with or without the U/I.

    I'm working on an app that prints out sheets of barcodes, so stay tuned if you are doing barcode publishing en masse.