二维码条形码生成的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 21 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JS实现简易日历效果
Jan 25 Javascript
vue常用高阶函数及综合实例
Feb 25 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函数getenv简介和使用实例
2014/05/12 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
Unix如何添加新的用户
2014/08/20 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
企业安全生产标语
2014/06/06 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
见习报告的格式
2014/11/04 职场文书
党小组评议意见
2015/06/02 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python