二维码条形码生成的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入门教程(12) js对象化编程
Jan 31 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
详解babel升级到7.X采坑总结
May 12 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
Views rows style模板重写代码
2011/05/16 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
document.all与WEB标准
2020/05/13 Javascript
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Python虚拟环境项目实例
2017/11/20 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python中while和for的区别总结
2019/06/28 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python获取栅格点和面值的实现
2020/03/10 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
程序员岗位职责
2013/11/11 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
小组口号大全
2014/06/09 职场文书
销售员态度差检讨书
2014/10/26 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js