二维码条形码生成的JavaScript脚本库


Posted in Javascript onJuly 07, 2022

引言

二维码条形码生成的JavaScript脚本库

二维码或条形码在日常生活中现在应用已经非常普遍了,文章分享生成条形码和二维码的JavaScript库。

条形码

条形码是日常生活中比较常见的,主要用于商品。通俗的理解就是一串字符串的集合(含字母、数字及其它ASCII字符的集合应用),用来常用来标识一个货品的唯一性,当然还有更多更深入与广泛的应用,像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用;

安装依赖:

npm install jsbarcode --save-dev

在 HTML 页面上加入以下代码:

<svg id="barcode"
  jsbarcode-value="123456789012"
  jsbarcode-format="code128"></svg>

接下来看下 JavaScript 代码,如下:

import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
    jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");

运行成功的效果如下:

二维码条形码生成的JavaScript脚本库

二维码

相比条形码,二维码的使用场景也越来也多,支付码、场所码、小程序等等。二维码的长相经常是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形,这种称之为二维码,他与一维码最大的区别就是存储容量大很多,而且保密性好。二维码本质上表现给大家的就是一个静态图片,其实是包含特字加密算法的图形,里面存储的是一串字符串(即字母、数字、ASCII码等),这说明二维码不仅存储量大,而且存储的内容很广泛,数字、字母、汉字等都可以被存储。

安装依赖:

npm install qrcode --save-dev

HTML:

<canvas id="qrcode"></canvas>

JavaScript:

import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");

效果如下:

二维码条形码生成的JavaScript脚本库

以上就是二维码条形码生成的JavaScript脚本库的详细内容,更多关于JavaScript二维码条形码的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php 伪静态之IIS篇
2014/06/02 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
英文简历中的自我评价
2013/10/06 职场文书
质检的岗位职责
2013/11/17 职场文书
房地产项目建议书
2014/03/12 职场文书
静心口服夜广告词
2014/03/20 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
文明寝室标语
2014/06/13 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
化妆品促销活动总结
2015/05/07 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python