二维码条形码生成的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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
React快速入门教程
Jan 17 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python自动化报告的输出用例详解
2018/05/30 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
大学生毕业的自我鉴定
2013/11/13 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
好的促销活动方案
2014/08/21 职场文书
安全员岗位职责
2015/02/10 职场文书
作息时间调整通知
2015/04/22 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
董事长秘书工作总结
2015/08/14 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫