uniapp vue3+ts h5端生成二维码与背景图合并成一张图片

ajzzz

已于 2023-12-05 17:16:01 修改

阅读量548

点赞数 7

文章标签： uni-app vue3.2 ts 二维码合成图片

于 2023-12-02 10:48:52 首次发布

本文链接：https://blog.csdn.net/weixin_43952634/article/details/134748980

版权

`<image class="strategyImgs" :src="data.imgURL" mode=""></image>
npm i qrcode //引入qrcode库
import qrcode from "qrcode"
import { ref } from "vue"
const data = ref({
		qrCodeUrl:"",
		imgURL:''
	})
	const setImage =  () => {
		let url =“qrcodeText”
		qrcode.toDataURL(url,(err,url) => {
			if (url) {
				data.value.qrCodeUrl = url
			}
		})
		var targetCanvas = 	document.createElement('canvas');
		targetCanvas.width = 750; // 设置画布宽度
		targetCanvas.height = 1330; // 设置画布高度
		var ctx = targetCanvas.getContext('2d');
		// 加载第一张图片
		var image1 = new Image();
		image1.src = '../../static/friend/YaoQinHaoYou.png';
		image1.onload = function () {
		    // 绘制第一张图片
		    ctx.drawImage(image1, 0, 0);
			// 加载第二张图片
			var image2 = new Image();
			image2.src = data.value.qrCodeUrl;
			image2.onload = function () {
			    // 绘制第二张图片
			    ctx.drawImage(image2, 290, 800);
			    ctx.font = '30px "微软雅黑"'; //字体大小
				ctx.fillText('我的邀请码：'+inviteCode, 310, 800) // (x, y)为文字显示位置
			    // 输出合并后的图像
			    data.value.imgURL =  targetCanvas.toDataURL("image/jpeg");
			}
		};
	
}