二维码条形码生成的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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
JavaScript 序列化对象实现代码
Dec 18 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
Three.JS实现三维场景
Dec 30 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js调用flash的效果代码
2008/04/26 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
学期自我评价
2014/01/27 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
小学一年级评语大全
2014/04/22 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
详解Python requests模块
2021/06/21 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js