在canvas中将两张图片合成一张——使用html2canvas插件实现

业务场景： 将两张图片按照指定格式合成为一张图片

首先安装html2canvas插件import html2canvas from 'html2canvas'

实现逻辑：

			drawProdPicture() {
				let img1 = new Image()
				img1.src = '图片1路径'
				img1.width = 1080
				img1.height = 2250
				img1.setAttribute('crossOrigin', 'anonymous')
				let canvas = document.createElement("canvas")
				let context = canvas.getContext("2d")
				canvas.width = 1080
				canvas.height = 2250
				let img2 = new Image()
				let flag = true
				// 将 img1 加入画布
				img1.onload = () => {
					context.drawImage(img1, 0, 0, 1080, 2250)
					img2.src = '图片2路径'
					img2.setAttribute('crossOrigin', 'anonymous')
					img2.width = 1080
					img2.height = 1850
					if (flag) {
						flag = false
					} else {
						let src = canvas.toDataURL()
						this.makePic = src
					}
				}
				// 将 img2 加入画布
				img2.onload = () => {
					context.drawImage(img2, 0, 0, 1080, 1850)
					if (flag) {
						flag = false
					} else {
						let src = canvas.toDataURL('image/png')
						this.makePic = src
						// console.warn('合成图片', this.makePic) 
					}
				}
			},