html h5打开微信小程序及html绘制合成二维码底图海报

最新推荐文章于 2024-04-10 22:42:37 发布
段wl
最新推荐文章于 2024-04-10 22:42:37 发布
阅读量558
点赞数 7
文章标签： html 微信小程序 notepad++
本文链接：https://blog.csdn.net/sdgjah2/article/details/135826838
版权
完整代码
<!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>