uni-app使用canvas将两张图片合成一张图片

Ayn慢慢

已于 2024-07-02 09:44:30 修改

阅读量2k

点赞数

分类专栏： uni-app 文章标签： uni-app canvas vue

于 2022-11-15 11:10:03 首次发布

本文链接：https://blog.csdn.net/qq_34400736/article/details/127862082

版权

HTML JavaScript 二维码生成 canvas 动态图片融合

关键词由CSDN通过智能技术生成

uni-app 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、HTML部分

<view class="poster" id="canvas">
	<img id="avatar" />
</view>

2、js部分

import {
		qrcanvas
	} from "qrcanvas"
const drawImg = async () => {
		let shareUrl = 'https://xxxx.com'
		nextTick(async () => {
			let qrc = qrcanvas({
				data: shareUrl,
				size: 180,
			});
			let imgsrc = qrc.toDataURL("image/png");
			qrcodeImg.value = imgsrc;  // 二维码

			var canvas = document.createElement("canvas");
			canvas.width = 640 * window.devicePixelRatio;
			canvas.height = 990 * window.devicePixelRatio;
			var context = canvas.getContext("2d");

			// 禁用图像平滑，避免模糊
			context.imageSmoothingEnabled = false;

			// 背景透明处理
			context.fillStyle = "transparent";
			context.fillRect(0, 0, canvas.width, canvas.height);

			var myImage = new Image();
			myImage.crossOrigin = 'Anonymous';
			myImage.src = sharePic;  // 在线图片

			let imgW = 640 * window.devicePixelRatio;
			let imgH = 990 * window.devicePixelRatio;

			let img2X = 50 * window.devicePixelRatio;
			let img2Y = 760 * window.devicePixelRatio;
			let imgWH = 180 * window.devicePixelRatio;


			myImage.onload = function () {
				context.drawImage(myImage, 0, 0, imgW, imgH);

				context.font = `${32 * window.devicePixelRatio}px Arial bold`;
				context.fillStyle = 'black';
				context.fillText(userName.value, 260 * window.devicePixelRatio, 790 * window.devicePixelRatio);

				var myImage2 = new Image();
				myImage2.src = qrcodeImg.value;
				myImage2.crossOrigin = 'Anonymous';

				myImage2.onload = function () {
					context.drawImage(myImage2, img2X, img2Y, imgWH, imgWH);

					// 生成最终的base64编码图片
					var base64 = canvas.toDataURL("image/png");
					var img = document.getElementById('avatar');
					img.setAttribute('src', base64);
				};
			};
		});
	};