一个小程序canvas生成并保存图片的实例

将用户名称，头像，小程序二维码（base64）绘制到画布中并保存
1.将一张底图打底
2，文字，头像的布局；将base64格式的二维码转成本地临时文件；
3.canvas生成图片
4.将图片保存至相册

具体代码如下：

view

<view   @click="invitian">立即邀请</view>

js:

invitian(name,headImg,code){
	uni.showLoading({title: '图片合成中',mask:true,  })
				wx.getImageInfo({
				  src: 'https://source1.suddenfix.com/ask_share_v6.png',
				  success:res=>{
					  console.log(res)
					  const ctx = wx.createCanvasContext('shareCanvas');
					     ctx.save();
					     ctx.drawImage(res.path, 0, 0, 375, 667)
					     ctx.setFillStyle('#909399') // 文字颜色：黑色
					     ctx.setFontSize(12) // 文字字号：22px
					     ctx.fillText(name+':', 39, 570);
						 ctx.save();
						 ctx.setFillStyle('#000') // 文字颜色：黑色
						 ctx.setFontSize(12) // 文字字号：22px
						 ctx.fillText('送你一份120元修机红包', 39, 586);
						 ctx.save();
						 ctx.setFillStyle('#000') // 文字颜色：黑色
						 ctx.setFontSize(12) // 文字字号：22px
						 ctx.fillText('及价值99元的钢化膜免费换新资格', 39, 606);
						 ctx.save();
							 const buffer = wx.base64ToArrayBuffer(code);
							  // console.log("buffer:"+buffer);
						 	 let fileManager = wx.getFileSystemManager();//获取文件管理器
						 	 let filePath = wx.env.USER_DATA_PATH + '/qrCode.jpg';//设置临时路径
						 	 fileManager.writeFile({//获取到的数据写入临时路径
						 	   filePath: filePath,//临时路径
						 	   encoding: 'binary',//编码方式，二进制
						 	   data: buffer,//请求到的数据
						 	   success: codeRes=>{
								   // console.log("filePath:"+filePath);
								   wx.getImageInfo({
								     src: filePath,
								     success:res=>{
										 // console.log(res.path)
										    ctx.save();
											ctx.drawImage(res.path, 236,546, 102, 102);
											wx.getImageInfo({
											  src: headImg,
											  success:res=>{
												// console.log(res.path)
												 ctx.save();
												 ctx.beginPath(); 
												 ctx.arc(60,531, 21, 0, 2 * Math.PI);
												 ctx.clip();
												 ctx.drawImage(res.path,39,510,42,42);
												 ctx.restore();
						 	                     ctx.draw(false,()=>{
						 	                      wx.canvasToTempFilePath({
						 	                        x: 0,
						 	                        y: 0,
						 	                        width: 375,
						 	                        height: 667,
						 	                        destWidth: 750,
						 	                        destHeight: 1334,
						 	                        canvasId: 'shareCanvas',
						 	                        quality:1,
						 	                        success: res=>{
											     	   // console.log(res.tempFilePath)
						 	                     	    uni.hideLoading();
						 	                     	    this.pathUrl = res.tempFilePath;
						 	                     		 let  eTime = Date.parse(new Date());
						 	                     	    wx.setStorageSync("sdfPosterTempFilePath",res.tempFilePath);
						 	                     	    wx.setStorageSync("data_expiration",eTime);
						 	                     	    this.shareCanvasShow = true;
						 	                        },
						                               fail:err=>{
						                                  uni.hideLoading() ;
						                               }
						 	                        })
						 	                     });
											  },
											  fail:err=>{
											  	uni.hideLoading() ;
											  }
											})

								     },
								     fail:err=>{
								     		 uni.hideLoading() ;
								     }
								   })
								  
							   },
						 	   fail: function(res) { 
								   uni.hideLoading() ;
								},
						 	 })  
				  },
				  fail:err=>{
					   uni.hideLoading() ;
				  }
				})
}

这里使用到了：二维码是base64格式，使用base64ToArrayBuffer转成buffer;
再利用getFileSystemManager拿到本地临时文件画到画布中；
这里可以是用（ Promise.all（））
我这个写代码看着实在不雅

一个保存海报的操作：

	// 保存海报
			saveImg(){
					uni.showLoading({title: '保存中...',mask:true,  })
					uni.saveImageToPhotosAlbum({
								filePath: this.pathUrl,
								success: res=>{
									 uni.hideLoading() ;
									 uni.showToast({title: '保存成功',	duration: 2000});
								},fail:(err)=>{
										uni.hideLoading();
										uni.showModal({
										    title: '是否要打开设置页',
										    content: '请到小程序设置中打开相册授权',
										    success: res=>{
												if (res.confirm) {
														this.openSetting();
												} 
											}
										});
										
								}
					});
			},
			
			openSetting(){
				 uni.openSetting({
						success:res=> {
							if(res.authSetting['scope.writePhotosAlbum']){
								this.saveImg();
							}else{
							
							}
						}
				});
			},