需求，uniapp微信小程序将页面的一部分保存为图片，可以分享和下载。实现这个功能需要使用canvas绘图，背景图片是网络图片，中间有原型二维码，图片格式是base64，还有一些其他的文字。最重要的是：无论是网络图片还是base64格式，都得到一个临时地址！！！base64的方法可以参考这篇文章。注意：base64可以直接在canvas上绘制，真机不显示！！！模拟器工作正常！//绘制画布//下面两个方法是将base64图片转成临时地址函数removeSave(FILE_BASE_NAME='tmp_base64src',format='jpg'){returnnewPromise((resolve)=>{//删除文件重新写入，防止写入超出最大范围constfsm=uni.getFileSystemManager();//文件管理constFILE_BASE_NAME='tmp_base64src';constfilePath=`${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;fsm.unlink({filePath:filePath,success(res){console.log('文件删除成功');resolve(true);},fail(e){console.log('readdir文件删除失败:',e);resolve(true);}});})}functionbase64ToSave(base64data:any,FILE_BASE_NAME='tmp_base64src'){constfsm=uni.getFileSystemManag呃（）；returnnewPromise(async(resolve,reject)=>{//format对应base64数据开头const[,format,bodyData]=/data:image\/(\w+);base64,(.*)/.exec(base64data)||[];if(!format){reject(newError('ERROR_BASE64SRC_PARSE'));}awaitremoveSave(FILE_BASE_NAME,format);constfilePath=`${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;//constbuffer=wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data:bodyData,//data:base64data.split(";base64,")[1],encoding:'base64',success(){resolve(filePath);},fail(){reject(newError('ERROR_BASE64SRC_WRITE'));},});});}//开始绘图//1.后台网络图像函数drawCanvas(){constctx=uni.createCanvasContext('activityCode')uni.getImageInfo({src:'****',success:res=>{//背景图片ctx.drawImage(res.path,0,0,140,190);//插入图片//绘制复制ctx.setFontSize(9)ctx.fillStyle='#FFFFFF'ctx.setTextAlign('center')ctx.fillText('***',70,40)//绘制原型图circleImg(ctx)ctx.draw()},fail:res=>{console.log(`缓存失败：${res.errMsg}`);}})}//2.绘制圆形图像functioncircleImg(ctx){ctx.beginPath()ctx.arc(70,100,34,0,2*Math.PI)ctx.setFillStyle('#ffffff')ctx.fill()ctx.clip()//url是上面保存的base64临时地址ctx.drawImage(url,40,70,60,60);}//保存图像functionsaveImg(){uni.canvasToTempFilePath({canvasId:'activityCode',success:function(res){uni.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(){uni.showToast({title:'保存成功',icon:'success'})},fail:function(){uni.showToast({title:'保存失败',icon:'none'})}})}})}注意：最好不要保存图片写好大小，否则会影响生成图片的清晰度！效果图：本文参加了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入
