思路:
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