网页前端js使用jquery.qrcode插件怎么实现生成带图标的二维码
网页前端js使用jquery.qrcode插件实现生成带图标的二维码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.yuantk.com/assets/css/main.css">
</head>
<body>
<div class="row uniform">
<div class="12u$">
<input type="text" name="qr-message" id="qr-message" placeholder="请输入二维码文本信息 文本或者链接（例如：http://www.yuantk.com）" />
</div>
<div class="12u$">
Logo图像
<img id="logoImg" style="vertical-align: middle; max-width: 30px; max-height: 30px;" />
<input type="file" id="logoImgSrc" accept="image/jpeg,image/jpg,image/png" />
</div>
<div class="12u$" id="qrcodeDiv">
</div>
<div class="12u$">
<button id="start" class="special">
生成二维码</button>
</div>
</div>
<script defer="defer">
window.onload = loadtool;
function loadtool() {
var ad = document.createElement("script");
ad.src = "https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ad, s);
$("#logoImgSrc").change(function() {
loadImg(this);
});
function loadImg(input_file) {
if (typeof (FileReader) === 'undefined')
{
layer.msg("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
}
else {
try {
/*图片转Base64 核心代码*/
var file = input_file.files;
for (var i = 0; i < file.length; i++) {
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file[i].type)) {
layer.msg("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function() {
$("#logoImg").attr("src", this.result);
// load(this.result);
}
return reader.readAsDataURL(file[i]);
}
} catch (e) {
layer.msg('图片转Base64出错啦！' + e.toString())
}
}
}
$("#start").click(function() {
$("#qrcodeDiv canvas").remove();
var qrmessage = $("#qr-message").val();
var logoImg = $("#logoImg")[0];
if (qrmessage == "") {
layer.msg("请输入二维码文本信息");
return;
}
if (typeof ($("#logoImg").attr("src")) == "undefined") {
layer.msg("请选择logo图标信息");
return;
}
//计算宽，高，中心坐标，logo大小
var width = 200;
var height = 200;
var x = width * 0.4;
var y = height * 0.4;
var lx = width * 0.2;
var ly = height * 0.2;
//生成二维码
$("#qrcodeDiv").qrcode({
width: width,
height: height,
text: qrmessage
});
//画logo
var canvas = $("canvas")[0];
canvas.getContext("2d").drawImage(logoImg, x, y, lx, ly);
});
}
</script>
</body>
</html>
<script defer="defer" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
使用效果演示传送门：