首先先在前台页面生成一个能够放图片cnavas的框，然后JS获取到各种信息，进行绘图（注意：绘图信息里只要有字段信息没有
或者错误），开发工具 就会显示透明版。放到cnavas掩藏着。点击生成的时候，显示出来。
WXML
<view style='width:0px;height:0px;overflow:hidden;'><canvas canvas-id="shareImg" style="width:700px;height:710px"></canvas> </view><!-- 预览区域 --><view hidden='{{hidden}}' class='preview' catchtouchmove='true' > <image bindtap='closetype' class='close' src="../../resource/images/gb.png"></image> <image class='tu' src='{{prurl}}' mode='widthFix' ></image> <button class='resave' type='primary' size='mini' bindtap='share'>重新加载</button> <button class='save' type='primary' size='mini' bindtap='save'>保存分享图</button></view><image bindtap='share' class='fenx' src="../../resource/images/fx.png"></image> js onLoad: function (e) { wx.setNavigationBarTitle({ title: wx.getStorageSync('companyinfo').name, }) var that = this; if (this.data.id > 0) { var id = this.data.id; } else { var id = e.id; this.data.id = e.id; } //初始化导航数据 app.util.request({ 'url': ' ', data: { id: id }, success: function (res) { if (!res.data.message.errno) { var houseDetail = R_htmlToWxml.html2json(res.data.data.list.content); var articleId = ' /'; that.data.title = res.data.data.list.housename; that.data.address = res.data.data.list.houseaddress; that.data.houseprice = res.data.data.list.houseprice; that.data.piclist =res.data.data.piclist; that.data.housecase = res.data.data.housecase; that.data.houseareaid = res.data.data.list.houseareaid; that.data.companyinfo = wx.getStorageSync('companyinfo').name; that.data.productspecial = res.data.data.list.productspecial; that.data.areaname = res.data.data.list.areaname; wx.setNavigationBarTitle({ title: that.data.title + '-' + wx.getStorageSync('companyinfo').name, }) that.setData({ data: res.data.data.list, }) } }, complete: function () { wx.hideNavigationBarLoading(); //完成停止加载 wx.stopPullDownRefresh(); } });//通过后台获取二维码 app.util.request({ 'url': ' ', data: { appid: " ", appsecret: " ", }, success: function (res) { if (!res.data.errno) { that.data.code = res.data; var promise1 = new Promise(function (resolve, reject) { wx.getImageInfo({ src: that.data.code, success: function (res) { console.log(res) resolve(res); } }); }) var promise2 = new Promise(function (resolve, reject) { wx.getImageInfo({ src: that.data.thumb, success: function (res) { console.log(res) resolve(res); } }); }) Promise.all([ promise1, promise2 ]).then(res => { console.log(res) const ctx = wx.createCanvasContext('shareImg') //主要就是计算好各个图文的位置 //下面都是从后台获取到的数据，如果不需要的话，可以直接写文字。 ctx.setFillStyle('#ffffff') ctx.fillRect(0, 0, 700, 710) ctx.drawImage(res[1].path, 0, 0, 700, 400) ctx.drawImage(res[0].path, 345, 500, 180, 160) // ctx.setTextAlign('center') ctx.setFontSize(30) ctx.setFillStyle('#000000') ctx.setTextAlign('center') ctx.fillText(that.data.title, 280, 30,500) ctx.setFillStyle('#ffffff') ctx.setTextAlign('center') ctx.fillText(that.data.title, 285, 30, 500) ctx.setFillStyle('#000000') ctx.setTextAlign('left') ctx.fillText(that.data.productspecial, 0, 450,500) ctx.fillText(that.data.areaname, 0, 500, 500) ctx.fillText(that.data.housetypename, 100, 500, 500) ctx.setFillStyle('red') ctx.setFontSize(40) ctx.fillText(that.data.houseprice, 0, 550,500) ctx.fillText("元/㎡", 130, 550, 500) ctx.setFontSize(30) ctx.fillText("长按识别", 350, 500, 500) ctx.setFontSize(24) ctx.setTextAlign('center') ctx.setFillStyle('#000000') ctx.fillText(that.data.companyinfo, 280, 700) ctx.stroke() ctx.draw() }) } } }); }, closemsg: function (e) { this.data.showmsg = true; this.setData({ showmsg: this.data.showmsg }) }, /** * 生成分享图 */ share: function () { var that = this wx.showLoading({ title: '努力生成中...' }) wx.canvasToTempFilePath({ x: 0, y: 0, width: 545, height: 771, destWidth: 545, destHeight: 771, canvasId: 'shareImg', success: function (res) { console.log(res.tempFilePath); that.setData({ prurl: res.tempFilePath, hidden: false }) wx.hideLoading() }, fail: function (res) { console.log(res) } }) }, /** * 保存到相册 */ save: function () { var that = this wx.saveImageToPhotosAlbum({ filePath: that.data.prurl, success(res) { wx.showModal({ content: '图片已保存到相册', showCancel: false, confirmText: '好的', confirmColor: '#72B9C3', success: function (res) { if (res.confirm) { console.log('用户点击确定'); that.setData({ hidden: true }) } } }) } }) }, closetype: function (e) { this.data.hidden = true; this.setData({ hidden: this.data.hidden }) }, wxss canvas{ position: fixed; top: 0; z-index:-10; left: 1000px; margin-top: 1000px;}.preview { width: 100%; height: 100%; background: rgba(0,0,0,.9); position: absolute; z-index: 2;}.preview .tu{ width: 70%; position: absolute; top: 10%; left: 15%; z-index: 3; border: 1px dashed #fff;}.preview .save{ width: 40%; position: absolute; bottom: 177rpx; left: 51%; }.preview .resave{ width: 40%; position: absolute; bottom: 177rpx; left: 7%; }.preview .close{ position: absolute; top: 3%; left: 48%; width: 8%; height: 5%; z-index: 999; }