【uniapp】图片合成并导入base64

两张图片合成,宽度固定,高度根据图片自适应

调用

javascript 复制代码
this.mergeImgs(this.imgList).then((res)=>{
	console.log(res,'图片base64')
})

方法

javascript 复制代码
mergeImgs(imgList) {
				// 图片合成
				return new Promise((resolve, reject) => {
					Promise.all(this.fileDtoList.map(imgList)).then((images) => {
						const canvas = document.createElement('canvas')
						const ctx = canvas.getContext('2d')
						// 确定合成图片的宽度
						const maxWidth = 1000; // 设置期望的宽度
						// 计算合成图片的高度
						const totalHeight = images.reduce((total, img) => {
						  const aspectRatio = img.width / img.height;
						  const scaledHeight = maxWidth / aspectRatio;
						  return total + scaledHeight;
						}, 0);
				
						// 设置 canvas 的大小
						canvas.width = maxWidth;
						canvas.height = totalHeight;
				
						// 在 canvas 上绘制图片
						let currentY = 0;
						images.forEach(image => {
						  const aspectRatio = image.width / image.height;
						  const scaledHeight = maxWidth / aspectRatio;
						  ctx.drawImage(image, 0, currentY, maxWidth, scaledHeight);
						  currentY += scaledHeight;
						});
						const base64 = canvas.toDataURL('image/png')
						resolve(base64)
					})
				})
			},
			loadImage(url) {
				return new Promise((resolve, reject) => {
					const image = new Image();
					image.onerror = reject;
					image.src = url;
					image.crossOrigin = 'Anonymous'
					image.onload = () => resolve(image);
				});
			},
相关推荐
10年前端老司机32 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序