二维码条形码生成的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 02 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
微信小程序异步处理详解
Nov 10 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python类定义的讲解
2013/11/01 Python
python修改注册表终止360进程实例
2014/10/13 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
详解python调度框架APScheduler使用
2017/03/28 Python
详解python和matlab的优势与区别
2019/06/28 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
广告学毕业生求职信
2014/01/30 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书