业务场景：生成一个浮层图片
实现思路：
设置一个盒子，将canvas生成的图片和保存图片的按钮放里边，当有canvas生成图片的时候这个盒子显示，否则隐藏。
这里需要注意的是，canvas画图片的时候，如果是线上路径就先要使用wx.getImageInfo获取图片的临时路径，使用这个路径就可以在真机上显示了
前台代码：
<canvas canvas-id="myCanvas" class='canvas'/><!-- 预览分享图 这里就是上图展示的效果 --><!-- 刚开始是隐藏的 生成分享图之后显示, 用一个布尔变量来控制 这里的样式大家看图就写出来了 --><view hidden='{{hidden}}' class='preview' bindtap='cancel'><image src='{{prurl}}' mode='widthFix'></image><view><button type='primary' size='mini' bindtap='save'>保存分享</button></view></view>
css代码：先让canvas不在用户的视线内
给弹出层设置固定定位，和透明色，弹性盒子
.canvas{width: 100%;height: 100%;position: fixed;left: 0;top: 999999rpx;background-color: rgba(0,0,0,0.3)}.preview{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);z-index: 2;text-align: center;display:flex; flex-flow:column;}.preview image{width: 80%;height: 80%;margin: 10%;margin-bottom: 5%;}.preview button{margin:0 20rpx;border-radius:50px;background-color:#ee2a65;width:40%;}
js代码：主要就是将canvas生成的图片保存为本地的路径
onShow: function () {var userId = wx.getStorageSync('user_id');var that = this;if (userId) {var qrcode = wx.getStorageSync('qrcode');if (!qrcode) {that.getQuear();}}}, getQuear:function(){var user_id = wx.getStorageSync('user_id');wxb.Post('/api/automatic.manage/getQrcode', {user_id: user_id}, function (data) {//获取网络图片本地路径wx.getImageInfo({src: data.path,//服务器返回的图片地址success: function (res) {//res.path是网络图片的本地地址// 小程序码wx.setStorageSync('qrcode', res.path);},});});},// 生成朋友圈图片share: function () {var conpanyCover = panyCover;var companyName = panyName;var companyPhone = panyPhone;var companyBusiness = panyBusiness;var companyAddress = panyAddress;var companyIntroduce = panyIntroduce;var user_id = wx.getStorageSync('user_id');var that = this;wx.getSystemInfo({success: function (res) {console.log(res.windowHeight)console.log(res.windowWidth)that.setData({windowHeight: res.windowHeight,windowWidth: res.windowWidth})},})var windowWidth = that.data.windowWidth;const ctx = wx.createCanvasContext('myCanvas')// 设置矩形边框ctx.setStrokeStyle('#fff')// 设置矩形宽高ctx.strokeRect(0, 0, 400, 200)let canvas = '../../resource/canvas.png';ctx.drawImage(canvas, 0, 0, 400, 1000)// 设置文字大小ctx.setFontSize(12)// 设置文字颜色ctx.fillStyle = '#9d9d9d';var str = "长按识别二维码,查看我小程序官网";ctx.fillText(str, (windowWidth - ctx.measureText(str).width) / 2, 510)var cover = '../../resource/4.png';ctx.drawImage(cover, 0, 0, 400, 200);// 名字设置var name = wx.getStorageSync('companyContacts');// 设置文字大小ctx.setFontSize(26)ctx.fillStyle = '#000';var name = name;// 填充文字ctx.fillText(name, 150, 65)// ctx.font = '微软雅黑';// 设置文字大小ctx.setFontSize(14)ctx.fillStyle = '#454545';// let canpany = ' 蚂蚁未来';let canpany = companyName;// 填充文字ctx.fillText('公司名:' + canpany, 45, 100)// 设置文字大小ctx.setFontSize(14)ctx.fillStyle = '#454545';var position = ' 经理';// 填充文字ctx.fillText('职位:' + position, 45, 130)// 联系方式ctx.setFontSize(14)ctx.fillStyle = '#454545';// var tel = " 15289310354";var tel = companyPhone;// 填充文字ctx.fillText('联系方式:' + tel, 45, 160)// 公司地址ctx.setFontSize(14)ctx.fillStyle = '#000';// 填充文字ctx.fillText('公司地址', 60, 370)// 公司业务标题ctx.setFontSize(14)ctx.fillStyle = '#000';// 填充文字ctx.fillText('公司业务', 60, 230)// 公司业务ctx.setFontSize(12)ctx.fillStyle = '#666';var text = companyBusiness;var chr = text.split("");//这个方法是将一个字符串分割成字符串数组var temp = "";var row = [];for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < windowWidth - 100) {temp += chr[a];}else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于2 则截取前两个if (row.length > 2) {var rowCut = row.slice(0, 2);// 这个参数就可以判断显示几行var rowPart = rowCut[1];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < windowWidth) {test += rowPart[a];}else {break;}}empty.push(test);var group = empty[0]//这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], 40, 253 + b * 18);}// 画线ctx.setFillStyle('#efefef')ctx.fillRect(45, 236, windowWidth - 100, 1)// 业务图标var yw = '../../resource/yw.png';ctx.drawImage(yw, 40, 216, 16, 16)// 公司简介ctx.setFontSize(14)ctx.fillStyle = '#000';// 填充文字ctx.fillText('公司简介', 60, 300)// 画下线ctx.setFillStyle('#efefef')ctx.fillRect(45, 306, windowWidth - 100, 1)// 简介图标var yw = '../../resource/jj.png';ctx.drawImage(yw, 40, 286, 16, 16)// 公司简介ctx.setFontSize(12)ctx.fillStyle = '#666';// var introduction = "蚂蚁未来科技有限公司办公室地址位于中国的首都，政治、文化中心北京，北京市朝阳区西大望路15号4号楼，注册资本为50 万元";var introduction = wx.getStorageSync('companyIntroduce');var chr = introduction.split("");//这个方法是将一个字符串分割成字符串数组var temp = "";var row = [];for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < windowWidth - 100) {temp += chr[a];}else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于2 则截取前两个if (row.length > 2) {var rowCut = row.slice(0, 2);var rowPart = rowCut[1];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < 220) {test += rowPart[a];}else {break;}}empty.push(test);var group = empty[0]//这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], 40, 322 + b * 18);}// 公司地址详情var chr = companyAddress.split("");//这个方法是将一个字符串分割成字符串数组var temp = "";var row = [];for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < windowWidth - 100) {temp += chr[a];}else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于2 则截取前两个if (row.length > 1) {var rowCut = row.slice(0, 1);var rowPart = rowCut[0];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < 220) {test += rowPart[a];}else {break;}}empty.push(test);var group = empty[0]//这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], 40, 390);}// 画下线ctx.setFillStyle('#efefef')ctx.fillRect(45, 375, windowWidth - 100, 1)// 地址图标var yw = '../../resource/dz.png';ctx.drawImage(yw, 40, 356, 16, 16)// 小程序二维码// var path1 = data.path;var qrcode = wx.getStorageSync('qrcode');console.log(qrcode)ctx.drawImage(qrcode, (windowWidth - 80) / 2, 410, 80, 80)ctx.draw(false, function () {wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function (res) {console.log(res.tempFilePath)// wx.previewImage({// urls: [res.tempFilePath] // 需要预览的图片http链接列表// })that.setData({prurl: res.tempFilePath,hidden: false})}})});},
点击保存图片
// 保存图片到本地save:function(){var that = thiswx.saveImageToPhotosAlbum({filePath: that.data.prurl,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {if (res.confirm) {console.log('用户点击确定');/* 该隐藏的隐藏 */that.setData({hidden: true})}}})}})},
