<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="images/share_500X852.jpg" style="display:none;"/>
<!--图2：边框图-->
<img class="boder-img" src="images/code_boder.png" style="display:none;"/>
<!--图3：二维码-->
<img class="code-img" style="display:none;"/>
<!--图4：二维码中间的logo-->
<img id="logo" src="images/logo.png" style="display:none;"/>
<!--jquery.qrcode生成的二维码-->
<div id="qrcode" style="display:none;"></div>
</div>
<!--canvas 合成的二维码分享图-->
<div class="qrcodeCanvas"></div>
<!--页面空白加载-->
<div id="pageLoading">
<p><img src="images/none_page.png" style="width:200px;height:200px;"/></p>
<p style="color:#999;font-size:25px;">页面加载中…</P>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.logo.min.js"></script>
<script type="text/javascript">
$(function(){
//生成二维码
$("#qrcode").qrcode({
render: "canvas", //也可以替换为table
minVersion: 1, // version range somewhere in 1 .. 40
maxVersion: 40,
ecLevel: 'H', //识别度 'L', 'M', 'Q' or 'H'
left: 0,
top: 0,
size: 300,//尺寸
fill: '#000',//前景色
background: null,//背景色
text: toUtf8("https://www.baidu.com/"),//二维码内容
radius: 0.1,// 0.0 .. 0.5
quiet: 1,//边距
mode: 4,//中间图片样式
mSize: 0.2,//logo图片大小
mPosX: 0.5,
mPosY: 0.5,
label: '飞鸟娱乐',
fontname: '黑体',
fontcolor: '#000',
image: $('#logo')[0]//logo图片
});
//将二维码显示到图3上
var canvas=$("#qrcode").find('canvas').get(0);
$('.code-img').attr('src',canvas.toDataURL('image/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])=> {
ctx.drawImage(img1, 0, 0, bgwidth, bgHeight)//(绘制图片资源,x坐标,y坐标,宽,高)
ctx.drawImage(img2, 365, 280, 400, 400)
ctx.drawImage(img3, 390, 305, 350, 350)
//设置字体属性
ctx.font = "40px bold 黑体";
//设置颜色颜色
ctx.fillStyle = "#64970E";
//绘制文字
ctx.fillText("飞鸟娱乐",490,270);
ctx.fillText("截图保存 • 长按识别",385,730);
imageURL = canvas.toDataURL("image/jpg");
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>
纯前端生成带专属的二维码的海报（完整源码）.rar
1星 需积分: 50 125 浏览量
2020-10-25
20:04:16
上传
评论 2
收藏 270KB RAR 举报 
纯前端生成带专属的二维码的海报（完整源码）.rar （8个子文件） 
纯前端生成带专属的二维码的海报（完整源码） 源码 images 
share_500X852.jpg 156KB
code_boder.png 10KB logo.png 4KB none_page.png 23KB js 
jquery-1.12.4.js 297KB jquery.qrcode.logo.min.js 21KB jquery.qrcode.logo.js 66KB
index.html 5KB
评论1
最新资源