微信小程序-drawImg绘制多张网路图片 - 好文

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

解决办法就是先用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); }, })

热门工具换一换