二维码条形码生成的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获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
Ajax基础知识详解
2017/02/17 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
python条件和循环的使用方法
2013/11/01 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python中的集合介绍
2019/01/28 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
python爬虫如何解决图片验证码
2021/02/14 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
MYSQL支持事务吗
2013/08/09 面试题
马智宇结婚主持词
2014/04/01 职场文书
勤俭节约倡议书
2014/04/14 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书