使用JSBarCode创建条形码

Question

我正在使用JSBarCode生成资产的条形码。我需要能够创建一个静态条形码，然后我想我可以自己获取动态部分。到目前为止，我的代码直接从上面链接中的文档复制而来。我认为文档应该提供一个可工作的示例来作为我的代码基础。也许我编写的代码有误，我已经安装了jsbarcode和canvas的npm包。

服务器端代码:

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>

当我尝试运行我的Node应用程序时，出现了一个错误。它很长，并没有太多用处，但希望你们中的其中一位能够理解它。以下是错误信息：

/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

如果您有更好的包可以读取和生成自定义条形码，请告知我，这样我就可以研究一下。

- Kirbytech

---

我尝试注释掉每一行代码以查看问题所在，似乎是JsBarcode(".barcode").init();引起了上述错误。但是如果没有它，我无法让它正常工作。我后来还尝试了$('.barcode').JsBarcode("546786756445465", {width: 1,height: 40});，但没有成功。我也尝试删除svg上的设置进行测试，但仍然没有成功。 - Kirbytech

如果这不是用于销售点扫描系统，您可能需要尝试另一种符号编码。UPC / EAN 不是最有效的选择，并且存在限制（仅数字，字符数量有限）。如果您只是要在资产上贴标签，我建议使用 Code 128。 - Brian Anderson

@BrianAnderson 代码128是我的计划，一旦条形码可以使用，我打算修改数据内容。这是目前的首要任务。 - Kirbytech

我没有使用过JSBarcode库的经验。它似乎相当全面。在过去的4年里，我已经使用了一百多行JavaScript来生成我的条形码。你可以看一下这个链接：https://codepen.io/notionovus/pen/GMwZBx。 - Brian Anderson

@BrianAnderson 这是您的自定义代码还是您在网上找到了文档以供使用？ 我喜欢它，而且似乎足够简单，可以毫无问题地使用它。 它是创建随机条形码还是仅根据设置的要求创建相同的条形码，只有不同的文本，高度和宽度？ 只是想着我如何实现这个操作，无论我是否需要随机生成器，或多或少。 - Kirbytech

Answer 1

你可以使用jsBarcode库来实现这一点，下面是一个演示。

JsBarcode(".barcode").init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.8.0/JsBarcode.all.js"></script>
<svg class="barcode" jsbarcode-format="upc" jsbarcode-value="012345678912" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
        </svg>

- Sharjeel Shahid

Answer 2

<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">

我在2014年编写了一个小型的Code128条形码生成器。现在我正在整理代码并发布到codepen上。它是100%客户端，使用纯净的Javascript，没有jQuery、库、字体或者服务器的依赖。你可以从U盘中运行它。所有的条形码都是由浏览器生成的。

这个旧代码应该能在任何支持JavaScript的浏览器中工作，并且它会生成HTML "img"标签，所以即使客户端已关闭JS，你也可以将其嵌入“div”中并在页面上显示。它是完全遵循MIT许可协议的，因此你可以自由下载和使用，无论是否带有用户界面。

如果你正在做大规模的条码发布，我正在开发一个可以打印出条形码纸张的应用程序，敬请期待。

- Brian Anderson

---

如何将这个存储到数据库中并在以后使其可读？ - Kirbytech

以上代码片段将"123456789012"的值转换成Code 128条形码，需要约7000个字节的文本，没有特殊或控制字符。可以使用一个简单的键-值存储将"img"标签作为文本块放置在值中，并将存储在条形码中的值用作键。向javascript代码提供键以创建在codepen中显示的大文本区域中的文本，而不是显示图片，请将大字符串保存在由键索引的值存储中。在显示时，从存储中检索字符串并将其放置在"div"标记内。 - Brian Anderson

你是如何创建单个数字的图像的？JsBarcode可以做到吗？ - Melab

@Melab，我的原始代码（大约是2012年）为每个字符创建了一幅图像，但我发现构建一个通用的条形码渲染引擎更有效率，该引擎根据高度、宽度和二进制代码从“00000”到“11111”来渲染每个段落（每个段落5位）。代码另一部分根据符号编码规则（Code 128，Code 39，UPC等）创建“1”和“0”。结果是大约100行JS代码，可以嵌入任何需要打印条形码的页面中。这些图像是用MS Paint创建的，转换为base64格式，并嵌入在上面的codepen链接的JS源代码中。 - Brian Anderson