基于createCanvasContext 的分享海报生成

• 支持 保存到相册
• 二维码生成部分使用qrcode

myimg() {
				let that= this;
				uni.saveImageToPhotosAlbum({
					filePath: uni.getStorageSync('imgs'),
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
							that.status = false;
					}
				});
					
			},
			async usemycanvas(isfalse) {
				let that = this;
				let userinfo = this.info;
				let _this = this;
				let device = uni.getSystemInfoSync();
				let width = device.windowWidth;
				//然后需要确定比例，设计图一般都是750的屏幕，这里是375px
				let wid = width / 375;
			
						if(isfalse==true){
								that.status = true;
						}			
				

				let ctx = await uni.createCanvasContext("mycanvas", that)

				new Promise(resolve => {
					ctx.setFillStyle('#FFF');
					ctx.fillRect(0, 0, 500 * wid, 900 * wid);
					uni.downloadFile({
						url: userinfo.poster_image,
						success: function(res) {
							
							ctx.drawImage(res.tempFilePath, 0, 0, 260 * wid, 560 * wid);
								ctx.save();
							resolve();
						}
					})
				}).then(res => {
					new Promise(resolve => {
						uni.downloadFile({
							url: 'logo'
							success: function(res) {
							
								ctx.drawImage(res.tempFilePath, 10, 10, 80 * wid, 20 *
									wid);
										ctx.save();
								resolve();
							}
						})
					}).then(resolve => {
						ctx.setFontSize(12)
						ctx.setFillStyle('#FFF')
						ctx.font = 'normal bold 16px Arial,sans-serif '
						ctx.fillText(userinfo.name, 10 * wid, 260 * wid)

						ctx.setFontSize(8)

						that.drawText('擅长:', 10 * wid, 260 * wid, ctx)
						that.drawText(userinfo.cateinfo?userinfo.cateinfo[0]:'无', 40 * wid, 260 * wid, ctx)



						ctx.setFontSize(8)

						that.drawText("简介：" + that.byteLength(userinfo.introduce, 60), 10 * wid, 280 *
							wid, ctx);
							
						// 获取uQRCode实例
						var qr = new UQRCode();
						// 设置二维码内容
						qr.data = '分享地址';
						// 设置二维码大小，必须与canvas设置的宽高一致
						qr.size = 100 *wid;
				
						// 调用制作二维码方法
						qr.make();
						// 获取canvas上下文
						var canvasContext = uni.createCanvasContext('qrcode', that); // 如果是组件，this必须传入
						// 设置uQRCode实例的canvas上下文
				
						qr.canvasContext = canvasContext;
				
						// 调用绘制方法将二维码图案绘制到canvas上
						qr.draw(false, (() => {
							setTimeout(() => {
												
								uni.canvasToTempFilePath({
									canvasId: 'qrcode',
									destWidth: 62 *wid, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
									destHeight: 62 * wid,
									quality: 1,
									fileType: 'jpg',
									success: (res) => {
										// console.log(res,'success')
										uni.compressImage({
											src: res
												.tempFilePath,
											quality: 100,
											success: res => {
												const
													share_img =
													res
													.tempFilePath
												uni.canvasToTempFilePath({
														canvasId: 'qrcode',
														destWidth: 62 *
															wid, //展示图片尺寸=画布尺寸1*像素比2
														destHeight: 62 *
															wid,
														quality: 1,
														fileType: 'jpg',
														success: (
															res
														) => {
															console
																.log(
																	res
																	.tempFilePath
																);
															uni.setStorageSync(
																'imgsqrcode',
																res
																.tempFilePath
															)
															uni.hideLoading()
															const
																img =
																res
																.tempFilePath
															// _this.show = false
															_this
																.$emit(
																	'confirm', {
																		share_img,
																		img
																	}
																)
														},
													},
													_this
												);
											}
										})
									},
								}, _this);
							
								resolve()
							}, 500)
						})())
						ctx.setFillStyle('#FFF');
						ctx.fillRect(10, 390, 64 * wid, 64 * wid);
						ctx.drawImage(uni.getStorageSync('imgsqrcode'),11, 391, 62 * wid,62 *wid)
						ctx.fillText('扫码咨询', 21, 476)
						new Promise(resolve=>{
							ctx.draw(false, (() => {
								setTimeout(() => {
						
									uni.canvasToTempFilePath({
										canvasId: 'mycanvas',
										destWidth: 500 *wid, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
										destHeight: 860 * wid,
										quality: 1,
										fileType: 'jpg',
										success: (res) => {
											// console.log(res,'success')
											uni.compressImage({
												src: res
													.tempFilePath,
												quality: 100,
												success: res => {
													const
														share_img =
														res
														.tempFilePath
													uni.canvasToTempFilePath({
															canvasId: 'mycanvas',
															destWidth: 500 *
																wid, //展示图片尺寸=画布尺寸1*像素比2
															destHeight: 860 *
																wid,
															quality: 1,
															fileType: 'jpg',
															success: (
																res
															) => {
																console
																	.log(
																		res
																		.tempFilePath
																	);
																uni.setStorageSync(
																	'imgs',
																	res
																	.tempFilePath
																)
																uni.hideLoading()
																const
																	img =
																	res
																	.tempFilePath
																// _this.show = false
																_this
																	.$emit(
																		'confirm', {
																			share_img,
																			img
																		}
																	)
															},
														},
														_this
													);
												}
											})
										},
									}, _this);
								
									resolve()
								}, 500)
							})())
							
						})
						
					
						uni.hideLoading()
				
					})
				})


			},

			byteLength(val, len = 25) {
				let b = len; // 规定长度
				let init = 0;
				let newVal = '';
				// 获取字符串字节总长度
				let totalLen = 0;
				for (var l = 0; l < val.length; l++) {
					if (val.charCodeAt(l) > 255) {
						totalLen += 2;
					} else {
						totalLen++;
					}
				}
				for (var i = 0; i < val.length; i++) {
					if (init <= b) {
						newVal += val[i]
						if (val.charCodeAt(i) > 255) {
							init += 2
						} else {
							init++;
						}
					}
				}
				return newVal + (totalLen > b ? '...' : '')
			},
			drawText(context, x, y, canvas) {
				let strArr = [];
				let n = 11;
				for (let i = 0, l = context.length; i < l / n; i++) {
					let a = context.slice(n * i, n * (i + 1));
					strArr.push(a);
				}
				strArr.forEach((item, index) => {
					// 限制只能显示4行文字
					if (index > 3) {
						return;
					}
					y += 20;
					canvas.setFontSize(12);
					canvas.setFillStyle('#FFF');
					canvas.fillText(item, x, y);
				});
			},