jquery.qrcode生成带logo和背景图的二维码

最新推荐文章于 2024-08-15 11:48:42 发布

lmp5023

最新推荐文章于 2024-08-15 11:48:42 发布

阅读量3.1k

点赞数

原文链接：https://blog.csdn.net/qq15577969/article/details/103174030?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

版权

效果图：

<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>