canvas将多张图片拼成一张图片

最新推荐文章于 2024-05-19 00:35:49 发布

不要失眠啊！

最新推荐文章于 2024-05-19 00:35:49 发布

阅读量448

点赞数 8

文章标签： php 前端开发语言

本文链接：https://blog.csdn.net/m0_61672533/article/details/135936554

版权


var ctx = uni.createCanvasContext('myCanvas');

// 循环图片数据
list.forEach((item, index) => {
    // drawImage (图片对象，x轴位置，y轴位置，图片宽，高)
    ctx.drawImage(item.url, 0, height * index, width, );
})

// g 是合成图片的总高度
ctx.draw(false, function () {
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						quality: 1,
						fileType: 'png',
						destWidth: width,
						destHeight: g,
						success: function (res) {
							that.ImgSrc = res.tempFilePath
							
						},
						fail: function (err) {
							uni.showToast({ title: '生成失败，请稍后重试', icon: 'none', duration: 2000 })
						}
					})
				}, 100)
			})

如果是网络图片的话需要使用 uni.getImageInfo 方法暂存本地