微信小程序自带的分享功能不支持分享到朋友圈，那我们的替代方法就是生成一张带小程序二维码的图片，在做这个时，刚开始写静态用的本地图片最后生成的图片都挺好的，但是后台将图片换成网络地址之后就出现了图片绘制不出来的情况
解决办法就是先用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);
},
})