二维码条形码生成的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 相关文章推荐
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JavaScript模拟push
Mar 06 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
JS实现瀑布流效果
Mar 07 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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 session有效期问题
2009/04/26 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python实现学生管理系统
2018/01/11 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
儿童python练习实例
2018/05/27 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Django权限控制的使用
2021/01/07 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
精伦电子Java笔试题
2013/01/16 面试题
开展创先争优活动总结
2014/08/28 职场文书
小学运动会报道稿
2014/10/04 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python