qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
公良修竹
思路：
1. 通过qrcode.js 生成带logo的二维码
2. 将背景图片、logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas
3. 将canvas 转成base64的url,存放到图片中，进行显示
4. 下载：js 通过动态生成 a标签，将图片的url 当成 a 标签的链接，再生成一个点击动作。但这种a标签的下载方式不适用于IE 浏览器。
4.1 IE浏览器下载：将图片的URL转成BLOB 类型，然后通过 window.navigator.msSaveOrOpenBlob() 方法进行下载即可。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="js/qrcode.min.js"></script>
<style type="text/css">
.qrcodeDiv{
position: relative;
left:0;
top:0;
height:780px;
width:500px;
margin: auto;
}
.qrcodeImgClass{
position:absolute;
left:50%;
top:5%;
transform:translateX(-50%);
}
.qrcodeDiv #backgroundImg{
width:500px;
height:710px;
}
.qrcodeDiv #logoImg{
width:80px;
height:80px;
}
</style>
<body>
<div class="qrcodeDiv" >
<!-- 二维码生成的canvas -->
<div class="qrcodeImgClass" id="qrcode" style="visibility:hidden;"></div>
<!-- 背景图 -->
<img class="qrcodeImgClass" id="backgroundImg" src = "background.jpg" style="visibility:hidden;" />
<!-- 二维码的logo图 -->
<img class="qrcodeImgClass" id="logoImg" src ="logo.png" style="visibility:hidden;" />
<!-- 合成的二维码的canvas -->
<canvas class="qrcodeImgClass" id="canvas" style="visibility:hidden;"></canvas>
<!-- 合成的二维码的img -->
<div class="qrcodeImgClass" id="newImage" > </div>
</div>
<button type="button" id="download" >下载</button>
<script>
//生成二维码
function createQRCODE(){
$('#qrcode').empty();
var options = {
text: "二维码扫出来的内容",
logo: "logo.png",
logoWidth: 80,
logoHeight: 80,
colorDark: "#4c6fae",
colorLight: "#ffffff",
dotScale: 0.8,
correctLevel: QRCode.CorrectLevel.M
};
var qrcode = new QRCode(document.getElementById("qrcode"), options);
}
//绘制合成的二维码的img
function drawImg(){
var qrcodeDom = document.getElementById("qrcode");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var backgroundImg = document.getElementById("backgroundImg");
var logoImg = document.getElementById("logoImg");
var qrcodeImg = qrcodeDom.lastChild;
var newImage = document.getElementById("newImage");
var imgNew = new Image();
imgNew.setAttribute("crossOrigin",'Anonymous');
// 生成合成的二维码的长高；
canvas.width = backgroundImg.offsetWidth;
canvas.height = backgroundImg.offsetHeight;
var backgroundImgW = backgroundImg.offsetWidth;
var backgroundImgH = backgroundImg.offsetHeight;
var qrcodeImgW = qrcodeImg.offsetWidth;
var qrcodeImgH = qrcodeImg.offsetHeight;
var drawQrcodeImgW = (backgroundImgW-qrcodeImgW)/2;
var drawQrcodeImgH = (backgroundImgH-50-qrcodeImgH)/2;
// 为了确保logo 处于二维码的中间
var drawLogoImgW = drawQrcodeImgW + ((qrcodeImgW-80)/2);
var drawLogoImgH = drawQrcodeImgH + ((qrcodeImgH-80)/2);
// 先绘制背景图片
ctx.drawImage(backgroundImg,0,0);
// 绘制二维码图片
ctx.drawImage(qrcodeImg,drawQrcodeImgW,drawQrcodeImgH,270,270);
//绘制logo 图片
ctx.drawImage(logoImg,drawLogoImgW,drawLogoImgH,80,80);
// 将canvas 转成base64的URL
imgNew.src = canvas.toDataURL();
// 将URL 放到Img 里
newImage.appendChild(imgNew);
}
// 生成二维码
createQRCODE();
//setTimeout 解决有时候图片不完整问题
setTimeout(function(){
drawImg();
},100);
//下载
$("#download").bind('click',function(){
var url = $("#newImage img").attr("src");
// ie 下载
if (window.navigator.msSaveOrOpenBlob) {
var blob = convertBase64UrlToBlob(url);
window.navigator.msSaveOrOpenBlob(blob, 'QR Code.png');
}else{
// 其他浏览器下载
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = "QR Code";
a.href = url;
a.dispatchEvent(event);
}
});
function convertBase64UrlToBlob(base64) {
var parts = base64.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
</script>
</body>
</html>
类似资料：