二维码条形码生成的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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
js的2种继承方式详解
Mar 04 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现paypal 授权登录
2015/05/28 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python机器学习实战之树回归详解
2017/12/20 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python批量下载抖音视频
2019/06/17 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python requests指定出口ip的例子
2019/07/25 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
创新型城市实施方案
2014/03/06 职场文书
中职生求职信
2014/07/01 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
建国大业观后感600字
2015/06/01 职场文书
关于环保的广播稿
2015/12/17 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android