Applet - canvas drawing Poster

Demand background

Applets cannot be shared directly to the circle of friends , So use posters ( The key is the invitation code ) Invite friends .
From the display level , Just a few pictures , Put them together by positioning , But the key is to save , This is the time , Need canvas To synthesize pictures . that canvas Draw posters , Just split the two parts

adopt css , Combined pictures presented to users , It's as simple as

adopt css Layout , Put the elements together . Needless to say ,

When saving , adopt canvas mapping , Combine the picture into a complete picture

canvas mapping , There are two patterns

1. new edition 2d Pattern ( A pit , Use with caution )
   

2. Old version canvas-id=“drawPoster”, Although the operation is tedious , But compatibility is good
   
   Get the picture size

downShareImage(imgurl) {
    
		console.log('imgurl', imgurl);
		return new Promise((resolve, reject) => {
    
			wx.getImageInfo({
    
				src: imgurl,
				success: (res) => {
    
					let {
     width, height, path } = res;
					resolve({
    
						width,
						height,
						path,
					});
				},
				fail: () => {
    
					wx.showToast({
    
						title: ' Download failed ',
						icon: 'none',
					});
					reject(' Download failed ...');
				},
			});
		});
	},

canvas mapping

	async drawPoster() {
    
		const {
     qrCodeImg, avatarImg, downImgRes, nickname } = this.data;
		const ctx = wx.createCanvasContext('drawPoster');
		ctx.drawImage(downImgRes.path, 0, 0, downImgRes.width, downImgRes.height);
		const avatarImgW = 233;
		const qrCodeW = 220;
		const radius = 233 / 2;
		let qrRadious = qrCodeW / 2;
		let avX = downImgRes.width / 2 - avatarImgW + 120;
		let avY = 100;
		let qrX = downImgRes.width / 2 - qrCodeW + 110;
		let qrY = 990;
		ctx.save();
		ctx.beginPath();
		ctx.arc(avX + radius, avY + radius, radius, 0, 2 * Math.PI); // arc How to draw a curve , Calculate according to the coordinates of the center point , So add the radius 
		ctx.clip();
		ctx.drawImage(avatarImg, avX, avY, 233, 233);
		ctx.restore();
		ctx.setFontSize(50);
		ctx.setTextAlign('center');
		ctx.setFillStyle('#7700d9');
		ctx.fillText(nickname, downImgRes.width / 2, 415);
		ctx.save();
		ctx.arc(qrX + qrRadious, qrY + qrRadious, qrRadious, 0, 2 * Math.PI); // arc How to draw a curve , Calculate according to the coordinates of the center point , So add the radius 
		ctx.clip();
		ctx.drawImage(qrCodeImg, qrX, qrY, 220, 220);
		ctx.restore();
		ctx.draw(false, async () => {
    
			let canvasData = await this.exportPoster();
			this.setData({
    
				canvasData,
			});
		});
	},

canvas Composite picture

exportPoster() {
    
		return new Promise((resolve, reject) => {
    
			wx.canvasToTempFilePath({
    
				x: 0,
				y: 0,
				width: 1061,
				height: 1404,
				canvasId: 'drawPoster',
				fileType: 'png',
				success(res) {
    
					resolve(res.tempFilePath);
				},
				fail() {
    
					wx.showToast({
    
						title: ' Download failed ',
						icon: 'none',
					});
					reject(' QR code generation failed ');
				},
			});
		});
	},

Long press save :

	saveImage() {
    
		const {
     canvasData } = this.data;
		if (!canvasData)
			return wx.showToast({
    
				title: ' Poster generation in progress ',
				icon: 'none',
			});
		if (this.drawPosterLock) return;
		this.drawPosterLock = true;
		wx.saveImageToPhotosAlbum({
    
			filePath: canvasData,
			success: (res) => {
    
				if (res.errMsg == 'saveImageToPhotosAlbum:ok') {
    
					wx.showToast({
    
						title: ' Saved successfully ',
					});
				}
			},
			complete: () => {
    
				this.drawPosterLock = false;
			},
			fail: () => {
    
				wx.showToast({
    
					title: ' Save failed ',
					icon: 'none',
				});
			},
		});
	},

Authorization logic

//  Save as picture 
	handlerSavePhoto() {
    
		let touchTime = this.data.touchEnd - this.data.touchStart;
		console.log('touchTime', touchTime);
		if (touchTime > 800) {
    
			wx.getSetting({
    
				success: (res) => {
    
					var userPhotosAlbum = res.authSetting['scope.writePhotosAlbum'];
					if (userPhotosAlbum) {
    
						this.saveImage();
						return;
					}
					if (userPhotosAlbum == undefined) {
    
						// for the first time , Permission has never been requested 
						wx.authorize({
    
							scope: 'scope.writePhotosAlbum',
							success: (res) => {
    
								if (res.errMsg == 'authorize:ok') {
    
									// Click... In the authorization position pop-up box   allow 
									this.saveImage();
								}
							},
						});
						return;
					}
					if (userPhotosAlbum != 'undefined') {
    
						//  The first authorization pop-up point is rejected   Authorization is not allowed 
						wx.showModal({
    
							title: ' Tips ',
							content: ' There is no authority , Please open the permission ',
							success: (res) => {
    
								if (res.confirm) {
    
									wx.openSetting({
    
										success: (res) => {
    
											if (res.authSetting['scope.writePhotosAlbum']) {
    
												this.saveImage();
											} else {
    
												//  unauthorized 
											}
										},
									});
								}
							},
						});
					}
				},
			});
		}
	},

summary ：

1. We're drawing canvas Always worry about size , And the drawing blur caused by size . Because the applet unit is rpx( Units adapted according to different models ), however canvas The drawing unit is px, Here's a good way .

• In fact, it is shown to users , It's just one. css Picture of layout , Use the units of the applet itself , Can solve the problem of different resolutions , And the rendering speed is very fast .
• When the user saves , What is kept is canvas drawing , Photos of composite pictures , Must be px, So you give canvas Wide and high , As long as it is consistent with the target diagram , Or double the size , All are ok Of

2. Because drawing requires data , And it's asynchronous , Use await To do synchronization sequence
3. utilize promise The package is beautiful
4. use ctx.clip(); Cut the picture , Will destroy the current canvas environment , So you need to save the previous canvas environment first , Then start painting , After painting, restore the previous canvas environment