by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10402 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、使用这个Github项目

JS生成条形码：https://github.com/lindell/JsBarcode

官方提供了一个实时的条形码生成器，点击这里访问。

如果上面的地址访问不了，也可以访问这个中文版，我把官方的生成器翻译了下，放在了自己服务器上，避免 N 年后上面地址失效后无法访问（已经踩过很多次坑了）。

二、如何使用？

使用还是很方便的。

首先，第一步，页面中在需要显示条形码的地方放好对应的图像元素，支持 SVG, Canvas 或者是 IMG 元素。

<svg id="barcode"></svg>
<!-- 或 -->
<canvas id="barcode"></canvas>
<!-- 或 -->
<img id="barcode"/>

然后，第二步，引入 JS 文件：

<script src="./JsBarcode.all.min.js"></script>

最后，第三步，执行对应的 JS 代码，例如：

JsBarcode("#barcode", "iam zhangxinxu");

即可大功告成。

眼见为实，您可以狠狠地点击这里：JSBarcode最基础条形码使用demo

参数

JsBarcode API 还是很丰富的，支持各种样式的自定义，支持各种条形码编码。

关于样式自定义参数见下表：

关于条形码的知识可以参见此百科，目前主要用在商品中，超市收银的时候，扫个码，滴一下，价钱就出来了。

虽然条形码在生活中很有用，似乎在互联网领域不如二维码，为什么呢？真的是在Web中一无是处吗？

三、条形码在Web中有什么用？

Web中我们藏匿信息用的多是二维码，因为可以包含更多的信息，包括中文在内都可以包括。

而条形码中文是不支持的，只能是英文字母和数字等比较基础的 Unicode 字符。

但是，条形码也是有优点的，那就是条形码的图形可以理解为是一维平面结构，造型更加简单，而二维码是二维图形结构，造型复杂些。

造型简单就有个好处，可以更加隐蔽地埋入信息。

例如，我们将条形码的高度变得足够小，则条形码表现得就如同虚线一般。

例如，下图是条形码生成器页面的高度调整为10的时候，10个阿拉伯数字的表现效果：

如果高度只有1px，再水平平铺，就像一个有点设计感的分隔虚线，比方说本文这句话下面的这条虚线，其实藏了我的名字。

当然，理论上简单，实际上要想识别还是有难度的，一旦平铺循环，到底哪里是头，哪里是尾，就很难辨认了，还需要想其他的办法才行。

之前讲“蝉原则”的时候（文章访问这里）有讲过CSS创建随机条纹背景的策略。

实际上，这种看起来随机的条纹和条形码是有很多神似的地方的，如果我们通过某种方法，将条形码的纹路藏在随机背景中，是不是就是一种非常隐蔽，但同时又不容易破坏的添加水印的方式呢？

四、JS生成二维码

顺便提下如何使用 JS 生成二维码，就是这个项目了：https://github.com/davidshimjs/qrcodejs

使用很简单，引入 JS，然后执行类似下面的 JavaScript 代码就 OK 了：

<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "https://www.zhangxinxu.com");
</script>

我自己早些年也做了个在线的二维码生成器，可以访问这里：在线转二维码小工具

非常简洁好用。

五、结语说明

哗啦哗啦，好像讲了很多，抬头一看，好像又没讲多少。

讲点其他信息吧，最近我在 B站 开了个名叫“散装Web前端技术”的合集，会更新一些前端视频小知识，每一期10分钟左右。

存货巨多，可以更新十年，管饱管够，我写的小说可以不看，但是此合集不容错过，赶快点击上面的链接，然后点个关注吧。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10402

（本篇完）