微信小程序自带的分享功能不支持分享到朋友圈，那我们的替代方法就是生成一张带小程序二维码的图片，在做这个时，刚开始写静态用的本地图片最后生成的图片都挺好的，但是后台将图片换成网络地址之后就出现了图片绘制不出来的情况
解决办法就是先用wx.getImageInfo({})先获取网络图片信息，在它的成功获取的回调函数里面进行canvas绘制网络图片，一个canvas里面要绘制多张网络图片时，需要在绘制完一张图片之后调用下一张图片的绘制函数，不然容易出现缺失；同样文字的绘制需要在在绘制完网络背景图片之后调用。
在结构的按钮绑定shareImg事件：
button bindtap='shareImg' class='bg-yellow color-000 text-center pull-right'保存朋友圈海报/button给大家分享一下我的项目实例的js的主要部分
Page({ /** * 页面的初始数据 */ data: { bgUrl: 'https://....../images/shareBg.jpg',//背景图片网络地址 title: '', qrcodeUrl: 'https://....../images/qrcode.png',//二维码图片网络地址 HandleUrl: 'https://....../images/zw.png',//手指图片网络地址 }, // 第一步绘制背景图片 setBg: function (context) { var that = this; var path = that.data.bgUrl wx.getImageInfo({ src: path, success: function (res) { var path = res.path; context.drawImage(path, 0, 0, 375, 602); //绘制完背景图之后绘制二维码 that.setQrcode(context); //同时绘制标题（绘制文本） that.setTitle(context); }, fail: function (res) { console.log(res); } }) }, //绘制代言标题 setTitle: function (context) { var title = this.data.title; context.setFontSize(15); context.setTextAlign('center'); context.setFillStyle('#f56259'); context.fillText(title, 185, 322.5) }, //第二步绘制二维码图片 setQrcode: function (context) { var that = this; var qrcodeUrl = this.data.qrcodeUrl; wx.getImageInfo({ src: qrcodeUrl, success: function (res) { var path = res.data; context.drawImage(qrcodeUrl, 400.5, 80, 120, 120); context.save(); context.restore(); context.stroke(); //绘制完二维码之后绘制手指 that.setHandle(context) }, fail: function (res) { console.log(res); } }) }, //第三个绘制指纹图片 setHandle: function (context) { var that = this; var HandleUrl = this.data.HandleUrl; wx.getImageInfo({ src: HandleUrl, success: function (res) { var path = res.path; context.drawImage(path, 230, 432.5, 80, 80); context.save(); context.restore(); context.stroke(); //绘制的最后一张图片绘制完之后回调生成图片 context.draw(false, function (e) { console.log("绘制完成之后回调") wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); that.setData({ newImage: tempFilePath, }) wx.hideToast() //保存图片到相册 wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success(res) { console.log(res) wx.showModal({ title: '提示', content: '将图片分享到朋友圈，让更多朋友来代言', success: function (res) { if (res.confirm) { } else if (res.cancel) { console.log('用户点击取消') } } }) }, fail(res) { console.log(res) } }) }, fail: function (res) { console.log(res); } }); }) }, fail: function (res) { console.log(res); } }) }, //canvas绘制图片 createNewImg: function (data) { var that = this; var path = that.data.bgUrl; console.log(path) var context = wx.createCanvasContext('mycanvas'); this.setBg(context);//绘制背景 }, //生成朋友圈分享图 shareImg: function () { var that = this; wx.showToast({ title: '生成中...', icon: 'loading', duration: 30000 }); wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 用户已经同意小程序使用保存到相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问 wx.saveImageToPhotosAlbum() console.log("open success") } }) } else { console.log("用户已经同意小程序使用保存到相册功能") } }, fail(res) { console.log("open fail") } }) var data = that.data; //生成新图片 that.createNewImg(data); },})
