完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<!-- 引入微信JS-SDK -->
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box_bg {
height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
background-color: #F20A0A;
}
#qrcode {
position: absolute;
top: 470px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.boxToo {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
font-size: 50px;
}
.img_box {
height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
background-color: #F20A0A;
}
.bgUrl {
width: 100%;
}
</style>
<script type="text/javascript" src="https://jquery.min.1.7.js"></script>
<script type="text/javascript" src="https://qrcode.min.js"></script>
<body>
<div class="box_bg">
<!-- <canvas id="canvas"></canvas> -->
<img class="bgUrl" src="https://applet_poster.png"
alt="">
</div>
<div class="boxToo">
请在手机浏览器中打开
</div>
<script>
$(function() {
if (isPCBrowser()) {
console.log('当前在PC浏览器中打开');
$('.box').hide()
$('.boxToo').show()
} else {
console.log('当前不在PC浏览器中打开');
$('.boxToo').hide()
$('.box').show()
getCodeFromURL()
getOpenLink()
}
});
// 判断是否在pc浏览器中打开
function isPCBrowser() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
// 判断是否是PC浏览器
return /android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos/i
.test(userAgent) === false;
}
const par = {
couponId: "",
path: ""
}
function getOpenLink() {
$.get('https://member/wxMa/getAccessToken', {
path: par.path
}, function(res) {
// 请求成功后的处理逻辑
if(par.path=='/pages/Home/home'||par.path==''){
location.href = res.data
}else{
location.href = res.data+'&couponId='+par.couponId
}
// /packageC/pages/OfflineCoupons/OfflineCoupons
}, "json")
.done(function() {
// 请求成功完成后的操作
console.log("请求成功完成");
})
.fail(function(err) {
// 请求失败后的操作
console.log("请求失败", err);
})
.always(function() {
// 不论请求成功还是失败，执行的操作
console.log("请求完成");
});
}
// 获取连接中所携带的参数
// 有couponId的话 进入活动页面没有的话进入首页
function getCodeFromURL() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('c')) {
par.couponId = urlParams.get('c');
par.path = '/packageC/pages/OfflineCoupons/OfflineCoupons'
} else {
par.path = '/pages/Home/home'
}
getQrOrderFunc()
}
//这里的data是你要生成二维码的连接
function getQrOrderFunc() {
// 路由完整链接
var fullUrl = window.location.href;
// 获取canvas元素和context对象
// 创建一个虚拟的 canvas标签
const canvas = document.createElement('canvas')
// const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
// 载入背景图片
var img = new Image();
img.src = 'https://applet_poster.png'; // 替换为你的图片路径
//处理toDataURL遇跨域资源导致的报错
img.crossOrigin = 'Anonymous';
// 在图片加载完成后绘制背景和二维码
img.onload = function() {
// 将图片绘制到canvas上
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
// 1. 获取图片的宽度和高度
var imageWidth = img.width;
var imageHeight = img.height;
// 2. 根据图片的宽高比例计算缩放比例：
var ratio = viewportWidth / img.width;
// console.log(ratio)
// 3. 根据缩放比例计算绘制图片时的宽度和高度：
var canvasWidth = imageWidth * ratio;
var canvasHeight = imageHeight * ratio;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// console.log(canvasWidth,'-----',canvasHeight)
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
// 将二维码绘制到背景图片上
// 生成二维码并绘制到canvas上
// 创建一个存储二维码的容器生成二维码
const qrCodeDiv = document.createElement('qrcode')
const qrCode = new QRCode(qrCodeDiv, {
text: fullUrl, // 替换为你的二维码数据
width: 375,
height: 375,
});
// 拿到生成出来的二维码地址链接
const qrUrl = qrCodeDiv.querySelector('canvas').toDataURL('image/png');
var qrCodeImg = new Image();
qrCodeImg.src = qrUrl; // 确保这里是一个有效的二维码图片URL
qrCodeImg.onload = function() {
var qrLeft = canvasWidth / 2 - qrCodeImg.width / 2;
var qrTop = 470;
ctx.drawImage(qrCodeImg, qrLeft, qrTop); // 调整二维码在背景图片上的位置
// 在这里调用canvas.toDataURL('image/png')并设置.imgUrl的src属性
//toDataURL 和 toBlob 效果是一样的
setTimeout(() => {
// var bgUrl = canvas.toDataURL('image/jpeg');
// console.log('toDataURL', bgUrl)
// $('.bgUrl').attr('src', bgUrl);
canvas.toBlob(function(blob) {
var url = URL.createObjectURL(blob);
// 使用url进行后续操作，如设置图片src属性等
$('.bgUrl').attr('src', url);
});
}, 100)
}
};
}
</script>
</body>
</html>