qrcode.js && jquery.qrcode.js

没有找到该库的原始出处，有知道的朋友欢迎指出

本地使用script标签引入

HTML结构

<div id="qrcodeimg" ></div>
<script src="/qcode/qrcode.js" type="text/javascript"></script>
<script src="/qcode/jquery.qrcode.js" type="text/javascript"></script>

Script文件

var creatqrcode = function (text="二维码生成器，可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式") {$('#qrcodeimg').html("");$('#qrcodeimg').qrcode({render: !!document.createElement('canvas').getContext ? 'canvas' : 'table',width: 200, height: 200, text: text});
}
$(function(){// 初始化生成二维码creatqrcode("aaaaaaaa")
})

优缺点

优点：简单易用，体积小，两个文件压缩后仅10kb

缺点：不支持中文及中文符号，仅支持英文、数字、英文符号，使用中文，会生成二维码，但是二维码扫描后会有乱码

示例

生成的节点

中文二维码

英文二维码

QRcode

github地址：QRcode

可在线可本地可安装

HTML结构

<div id="qrcodeimg" ></div>
<script src="/qrcode.min.js" type="text/javascript"></script>

Script文件

var creatqrcode = function (text="二维码生成器，可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式") {$("#qrcodeimg").html("");new QRCode('qrcodeimg', {text: text,width: 200,height: 200,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H //纠错等级});
}
$(function(){// 初始化生成二维码creatqrcode("我是整顿侠，我要整顿职场不良风气！")
})

优缺点

优点：简单易用，通用性强

缺点：（仅指我当前使用版本）当中英文混合输入时，长度判断混淆，容易内容超出最大长度，导致空白

示例

生成的节点

二维码

arale-qrcode

github地址：arale-qrcode

可在线可本地可安装

HTML结构

<div id="qrcodeimg" ></div>
<script src='arale-qrcode.js' type="text/javascript"></script>

Script文件

var creatqrcode = function (text="二维码生成器，可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式", logo="") {// 生成二维码var codeFigure = new AraleQRCode({"render": "svg",  // 生成的类型 'svg' or 'table'"text": text, // 需要生成二维码的链接"size": 200,// 生成二维码大小"foreground": "#000000", // 二维码颜色"image": logo, // 二维码中间logo"imageSize": 50, // 二维码中间logo大小});var share_tools = document.querySelector('#qrcodeimg');// 先清空之前的二维码，在填充新的二维码$(share_tools).empty();share_tools.appendChild(codeFigure);
}
$(function(){// 初始化生成二维码creatqrcode("我是整顿侠，我要整顿职场不良风气！")
})

优缺点

优点：简单易用，通用性强，功能强大

缺点：生成的为svg图片，当中心有logo时，使用html2canvas下载的文件，中心图片缺失

示例

生成的节点

坏图二维码

正常二维码

Awesome-qr

github地址：Awesome-qr

可在线可本地可安装

HTML结构

<img id="qrcodeimg" ></img>
<script src='/ScriptsMain/awesome-qr.js' type="text/javascript"></script>

Script文件

var creatqrcode = function (text, logo, background) {// 二维码生成参数var text = text || '二维码生成器，可将文字、分享链接、电话等纯文本或wifi链接信息转换并生成为二维码形式'var size = 200;var colorDark = "#000000";var margin = 9var background = background || "#ffffff";var logo = logo || "";$("#qrcodeimg").css({width:size+"px",height:size+"px"})new AwesomeQR.AwesomeQR({text: text, // 内容size: size, // 二维码大小margin: margin, // 二维码白边大小colorDark:colorDark, // 二维码颜色colorLight: "rgba(159,255,255,0)", // 二维码背景颜色logoImage : logo, // 二维码中间logologoScale : 0.3, // 二维码中间logo大小logoCornerRadius : 0, // 二维码中间logo圆角}).draw().then((dataURL) => {$("#qrcodeimg").attr("src", dataURL)}).catch((err) => {console.error(err);});
}
$(function(){// 初始化生成二维码creatqrcode("我是整顿侠，我要整顿职场不良风气！")
})

优缺点

优点：简单易用，通用性强，功能强大，可配置项多，不生成标签，仅生成dataurl，方便使用和下载

缺点：暂未发现

示例

生成的节点

二维码

文中所提到的库的本地文件版

qrcode.js && jquery.qrcode.js ：基于jquery的qrcode.zip-Javascript文档类资源-CSDN下载

QRcode：qrcode.min.js-Javascript文档类资源-CSDN下载

arale-qrcode：arale-qrcode.js-Javascript文档类资源-CSDN下载

awesome-qr：awesome-qr.js-Javascript文档类资源-CSDN下载

JS前端生成二维码的几种方式相关推荐

利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
生成二维码的三种方式
一:二维码的概念二维条码(2-dimemsional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的图形二: 二维码的分类通常分为三 ...
关于利用qrcode生成二维码的两种方式的区别
首先以下内容是查找网上资料后了解的利用qrcode.js生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http://www.helloweba.com/view-blog ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
使用Python快速生成二维码的两种方式及二维码解码
Python有好几个模块(例如qrcode.MyQR)可以一两行代码就生成一个二维码,也有解码二维码以了解原始字符串的代码,简单方便. 下面介绍qrcode模块和MyQR模块. 一.qrcode模块 ...
php生成二维码的几种方式，超级实用
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/ 2.PHP环境必须开启支持GD2扩展库支持(一般情况下都 ...
前端生成二维码qrcode.js，并下载
利用qrcode.js在前端生成二维码,并下载一.引入js包 <script type="text/javascript" src="//static.runoo ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...

JS前端生成二维码的几种方式

qrcode.js && jquery.qrcode.js

HTML结构

Script文件

优缺点

示例

QRcode

HTML结构

Script文件

优缺点

示例

arale-qrcode

HTML结构

Script文件

优缺点

示例

Awesome-qr

HTML结构

Script文件

优缺点

示例

文中所提到的库的本地文件版

JS前端生成二维码的几种方式相关推荐

最新文章

热门文章