二维码条形码生成的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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
浅谈js原生拖放
Nov 21 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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中反射的应用
2013/06/18 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php类的定义与继承用法实例
2015/07/07 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
应届毕业生求职信范文
2013/12/18 职场文书
中秋寄语大全
2014/04/11 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
党员对照检查材料
2014/09/22 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
优秀党员个人总结
2015/02/14 职场文书