小程序canvas生成海报

小程序canvas生成海报，画布转图片后可直接保存图片到系统相册；
海报素材使用图片宽750px；
注：
画布转图片时参数destWidth 值 须 * dpr 否则IOS测试生成的图片是模糊的；

.wxml
注：
canvas CSS样式 不可设置display:none; 开发者工具调试没有问题；IOS调试时是有问题的；
canvas CSS样式 宽高（canvasW/canvasH） 须 与海报图片宽高一致 否则IOS测试生成的图片是模糊的；

<canvas wx:if="{{!posterUrl}}" type="2d" id="myCanvas" style="width: {{canvasW}}rpx;height: {{canvasH}}rpx;"></canvas>
<image wx:if="{{posterUrl}}" data-url="{{posterUrl}}" catchtap="saveImg" class="invite_friends_posters_img" src="{{posterUrl}}" mode="aspectFit"></image>

.js

// 获取二维码图片后的操作
wx.showLoading({
	title: '生成中...',
	mask: true
})
//设置海报
this.setHb();

//设置海报
setHb() {
	// console.log(this.data.qrcodeurl);
	// 下载图片（url须在合法域名中）
	wx.downloadFile({
		url: this.data.qrcodeurl, //携带当前用户信息的二维码图片
		success: (qrcodeTempFileRes) => {
			console.log('二维码本地临时路径', qrcodeTempFileRes.tempFilePath);
			const query = wx.createSelectorQuery();
			query.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
					// console.log(res);
					const canvas = res[0].node;
					// console.log('canvas初始宽高', canvas.width, canvas.height);
					const ctx = canvas.getContext('2d');

					const dpr = wx.getSystemInfoSync().pixelRatio;
					// console.log(dpr);
					// canvas.width = res[0].width * dpr;
					// canvas.height = res[0].height * dpr;
					// console.log(canvas.width , canvas.height)
					// ctx.scale(dpr, dpr);

					// 写入海报背景图片
					const posterBgImg = canvas.createImage();
					posterBgImg.src = '../../../images/posters.png';
					posterBgImg.onload = () => {
						// console.log('背景图实际宽高', posterBgImg.width, posterBgImg.height);
						canvas.width = posterBgImg.width;
						canvas.height = posterBgImg.height;
						this.setData({
							canvasW: posterBgImg.width, // 须 与海报图片宽度(canvas.width)一致 否则IOS测试生成的图片是模糊的
							canvasH: posterBgImg.height, // 须 与海报图片宽度(canvas.width)一致 否则IOS测试生成的图片是模糊的
						})
						// console.log('canvas宽高设置与背景图一致', canvas.width, canvas.height);
						ctx.drawImage(posterBgImg, 0, 0, posterBgImg.width, posterBgImg.height);
						// 写入二维码图片
						const qrcodeImg = canvas.createImage();
						qrcodeImg.src = qrcodeTempFileRes.tempFilePath;
						qrcodeImg.onload = () => {
							ctx.drawImage(qrcodeImg, 506, 1054, 160, 160);
							// 把当前画布指定区域的内容导出生成指定大小的图片，可直接保存图片到系统相册
							wx.canvasToTempFilePath({
								// x: 100,
								// y: 200,
								// width: 50,
								// height: 50,
								destWidth: canvas.width * dpr, // 须 * dpr 否则IOS测试生成的图片是模糊的
								destHeight: canvas.height * dpr, // 须 * dpr 否则IOS测试生成的图片是模糊的
								fileType: 'jpg',
								canvas: canvas,
								success: (posterImgTempFilePathRes) => {
									console.log('海报临时路径', posterImgTempFilePathRes.tempFilePath);
									this.setData({
										posterUrl: posterImgTempFilePathRes.tempFilePath,
									})
									wx.hideLoading();
								},
								fail(failres) {
									console.log(failres);
									wx.hideLoading();
								}
							})
						}
					}
				})
		},
		fail(res) {
			console.log(res)
		}
	})
},

//保存海报图片
saveImg(e) {
	if (!this.data.ifSetting) {
		wx.getSetting({
			success: (res) => {
				console.log(res.authSetting);
				if (typeof(res.authSetting['scope.writePhotosAlbum']) != 'undefined') {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						wx.openSetting({
							success(res) {
								console.log(res.authSetting);
							}
						})
					} else {
						this.setData({
							ifSetting: true
						});
					}
				}
			}
		})
	}
 
	// wx.downloadFile({
	// 	url: e.currentTarget.dataset.url,
	// 	success: (res) => {
			wx.showLoading({
				title: '下载中',
			})
			wx.saveImageToPhotosAlbum({
				// filePath: res.tempFilePath,
				filePath: e.currentTarget.dataset.url,
				success: (res) => {
					this.setData({
						ifSetting: true
					});
					wx.showToast({
						title: '保存海报成功',
						icon: 'success',
						duration: 2000
					})
				},
				fail() {
					wx.hideLoading();
				}
			})
	// 	}
	// })
},