二维码条形码生成的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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jquery 插件学习(四)
Aug 06 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
深入理解vue路由的使用
Mar 24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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程序?
2006/12/08 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue实现搜索功能
2019/05/28 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python自动化unittest yaml使用过程解析
2020/02/03 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
高中打架检讨书
2014/02/13 职场文书
优质服务演讲稿
2014/05/14 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang