jquery.qrcode生成带logo和背景图的二维码
效果图：
<html lang="zh-cn">
<head>
<title>jQuery生成二维码分享图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no">
<style type="text/css">
body{
width: 100%;
height: 100%;
}
.qrcodeCanvas {
width: 100%;
height: 100%;
display:none;
}
#pageLoading{
text-align:center;
padding:50px 0;
}
</style>
</head>
<body>
<div id="qrcodeBox">
<!--图1：背景图-->
<img class="bg-img" src="/admin/images/lantian.jpg" style="display:none;"/>
<!--图2：二维码中间的logo-->
<img class="boder-img" src="/admin/images/a.jpg" style="display:none;"/>
<!--图3：二维码-->
<img class="code-img" style="display:none;"/>
<!--jquery.qrcode生成的二维码-->
<div id="qrcode" style="display:none;"></div>
</div>
<!--canvas 合成的二维码分享图-->
<div class="qrcodeCanvas"></div>
<!--页面空白加载-->
<!-- <div id="pageLoading">
<p><img src="/admin/images/empty_forget_paw.jpg" style="width:200px;height:200px;"/></p>
<p style="color:#999;font-size:25px;">页面加载中…</P>
</div> -->
<script type="text/javascript" src="/index/jq/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/index/jq/jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(function(){
//生成二维码
$("#qrcode").qrcode({
text: toUtf8("https://www.baidu.com/"),//二维码内容
});
//将二维码显示到图3上
var canvas=$("#qrcode").find('canvas').get(0);
$('.code-img').attr('src',canvas.toDataURL('/admin/images/empty_forget_paw.jpg'));
// setTimeout(
// function(){
//绘制图片
drawImage();
// },500);
})
function drawImage() {
//图1
let bg_img = document.getElementsByClassName('bg-img')[0].getAttribute('src');
//图2
let boder_img = document.getElementsByClassName('boder-img')[0].getAttribute('src');
//图3
let code_img = document.getElementsByClassName('code-img')[0].getAttribute('src');
var bgwidth=$(".qrcodeCanvas").width();
var bgHeight=$(".qrcodeCanvas").height();
//canvas必须设定确定的宽高,设置为图片大小
let canvas = document.createElement('canvas')
canvas.width = bgwidth;
canvas.height = bgHeight;
let ctx = canvas.getContext("2d");
ctx.rect(0,0, canvas.width, canvas.height); //(距离左上角x坐标,距离左上角y坐标,宽度,高度)
ctx.fillStyle = "#fff"; //矩形的颜色
ctx.fill(); //填充
loadImg([
bg_img,
boder_img,
code_img,
]).then(([img1, img2,img3])=> {
// 二维码的顺序要放在logo之前，不然会覆盖掉
ctx.drawImage(img1, 0, 0, bgwidth, bgHeight)//(绘制图片资源,x坐标,y坐标,宽,高)
ctx.drawImage(img3, 390, 305, 350, 350)
ctx.drawImage(img2, 510, 425, 100, 100)
//设置字体属性
ctx.font = "40px bold 黑体";
//设置颜色颜色
// ctx.fillStyle = "#64970E";
//绘制文字
// ctx.fillText("小熊",490,270);
ctx.fillText("截图保存 • 长按识别",385,730);
imageURL = canvas.toDataURL('/admin/images/empty_forget_paw.jpg');
// console.log(imageURL)
let compose_img = new Image();
compose_img.src = imageURL;
compose_img.setAttribute("alt", "好友邀请图片");
document.getElementsByClassName("qrcodeCanvas")[0].append(compose_img)
canvas.style.display = "none";
$("#pageLoading").hide();
$(".qrcodeCanvas").show();
});
}
function loadImg(src) {
const paths = Array.isArray(src) ? src : [src];
const promise = [];
paths.forEach((path) => {
promise.push(new Promise((resolve, reject) => {
let img = new Image();
img.setAttribute("crossOrigin", 'anonymous');
img.src = path;
img.onload = () => {
resolve(img);
};
img.onerror = (err) => {
alert('图片加载失败')
}
}))
});
return Promise.all(promise);
}
//如果内容中有中文，在生成二维码前就要把字符串转换成utf-8
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
</script>
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章