大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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 = 9
var 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, // 二维码中间logo
logoScale : 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下载
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183773.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...