微信小程序-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);
  },
})

最后

以上就是自信红酒为你收集整理的微信小程序-drawImg绘制多张网路图片的全部内容，希望文章能够帮你解决微信小程序-drawImg绘制多张网路图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。