JS与条形码的生成

这篇文章发布于 2022年05月12日,星期四,01:01,归类于 JS实例。 阅读 7751 次, 今日 4 次 6 条评论

 

条形码图片示意

一、使用这个Github项目

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

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

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

JS条形码生成器页面截图

二、如何使用?

使用还是很方便的。

首先,第一步,页面中在需要显示条形码的地方放好对应的图像元素,支持 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

二维码使用 demo 示意

参数

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

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

可选参数 默认值 类型
format "auto" (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
text undefined String
fontOptions "" String
font "monospace" String
textAlign "center" String
textPosition "bottom" String
textMargin 2 Number
fontSize 20 Number
background "#ffffff" String (CSS color)
lineColor "#000000" String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
valid function(valid){} Function

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

虽然条形码在生活中很有用,似乎在互联网领域不如二维码,为什么呢?真的是在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分钟左右。

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

散装Web前端技术

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 瞎说的说道:

    “我写的小说可以不看,但是此合集不容错过”

    好看。

  2. 王小帅说道:

    可以试试

  3. fg说道:

    不对 是识别条形码的库

  4. fg说道:

    那么扫描识别二维码的库能推荐下么?

  5. todayisall说道:

    写的小说也要看