小程序 分销二维码页面生成

xx.wxml

<!-- 分销 -->
  <view class="retailk" bindtap="goFenx" wx:if="xx">
    <image src="../../static/retail.png"></image>
  </view>

.js

// 点击分销按钮触发
goFenx:function(e){
    var that = this;
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImgs();
    }, 1000)
  },


//分销画布
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImgs: function () {
    let that = this
    wx.getImageInfo({
      src: "httpsIp地址/static/uploads/qrcode_"+wx.getStorageSync('userinfo')['id']+".jpg",    //请求的网络图片路径
      success: function (ress) {
        //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
        that.setData({
          qrcode:ress.path
        })
        var context = wx.createCanvasContext('mycanvasfx');
    var path2 = "/static/fx_bg.png";
    context.drawImage(path2, 0, 0, 340, 450);
 
    //标题
    context.setFontSize(30);
    context.setFillStyle('#ffffff');
    context.setTextAlign('center');
    context.fillText("成为餐照VIP", 180, 60);
    context.stroke();
    //特享内容
    context.setFontSize(20);
    context.setFillStyle('#E65836');
    context.setTextAlign('center');
    context.fillText("享受会员特价", 170, 135);
    context.fillText("年卡会员立送100元优惠券", 170, 170);
    context.stroke();
    //绘制验证码背景
    var path3 = ress.path;
    context.drawImage(path3, 85, 190, 169, 169);
    //提示文字
    context.setFontSize(15);
    context.setFillStyle('#333333');
    context.setTextAlign('center');
    context.fillText("长按保存二维码可分享", 170, 390);
    context.stroke();

    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvasfx',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePaths: tempFilePath,
            canvasHidden:true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
      }
    })
    

    
  },