二维码条形码生成的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表数据排序 sort table data
Feb 18 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
JS处理一些简单计算题
Feb 24 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
JavaScript实现九宫格拖拽效果
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python通过zabbix api获取主机
2018/09/17 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python unittest框架操作实例解析
2020/04/13 Python
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
思想政治自我鉴定
2013/10/06 职场文书
班班通项目实施方案
2014/02/25 职场文书
公共场所禁烟标语
2014/06/25 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
法律进社区活动总结
2015/05/07 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏