微信小程序绘制海报,或者把多张图片合成一张

微信小程序绘制海报,或者把多张图片合成一张,例子







 setpic(){
    console.log('1111')
    wx.showLoading({
      title: '加载中',
      icon: 'loading',
      mask: true
    })
    let that = this;
    var systemInfo = wx.getSystemInfoSync(); 
    let syswidth = systemInfo.windowWidth;
    let mabgh = systemInfo.windowWidth
    this.setData({
      pich:systemInfo.windowHeight,
      mabgh: 754/rate,
      mabgw:  423/rate,
      cawidth: 200/rate
    })
    console.log(systemInfo.windowWidth); 
    var url = this.data.picUrl
    //得到大的背景图
    let promise0 = new Promise(function (resolve,reject){
      wx.getImageInfo({
        src: url+'static/images/hecardbg1.png',//背景图片地址
        success: function (res) {
          that.setData({
            zeropath: res.path
          })
          resolve(res);
       
        },
      });
    })
       //得到大的背景图
       let promise2 = new Promise(function (resolve,reject){
        wx.getImageInfo({
          src: url+'static/images/malogo.png',//背景图片地址
          success: function (res) {
            that.setData({
              malogo: res.path
            })
            resolve(res);
         
          },
        });
      })

     //画二维码
    let promise1 = new Promise(function (resolve, reject) {
      console.log("ewwidth:", syswidth)
      console.log("ewheight:", syswidth)
      console.log("ewm:", '123')//二维码地址
      drawQrcode({
        width: 200/rate,
        height: 200/rate,
        canvasId: 'myQrcode',
        // ctx: wx.createCanvasContext('myQrcode'),
        typeNumber: 10,
        text: baseUrlhe+'qst/developmem?partner='+that.data.parId,
        callback(e) {
          console.log('e: ', e)
        }
      })

      setTimeout(()=>{
      wx.canvasToTempFilePath({
        canvasId: 'myQrcode',
        success(res) {
          ewmpath = res.tempFilePath,
          that.setData({ 
            showEwm: false
          })
          resolve(res);
        }
      })},1000)
    });
     
  //组合图片
    Promise.all([
      promise0, promise1,promise2
    ]).then(res => {
      var ctx = wx.createCanvasContext('myCanvas');
      // ctx.setFillStyle('white')
      // ctx.fillRect(0, 0, 247,  324.5)
      ctx.drawImage(this.data.zeropath, 0, 0, 423/rate,  754/rate);
      ctx.drawImage(ewmpath,  109/rate, 285/rate,  200/rate,200/rate );
      ctx.drawImage(this.data.malogo,  183/rate, 365/rate, 47/rate,  47/rate);
    //   ctx.setFontSize(14)
    //   ctx.setFillStyle('black')
    //   ctx.textAlign = 'center'
    //  ctx.textBaseline = 'middle'
     // ctx.fillText('文本内容', 150, 75)
      // ctx.fillText('扫码关注和卡分享小程序,拓展团队收益多多。', syswidth/2, syswidth)
      // ctx.fillText('拓展团队收益多多。', syswidth/2,  syswidth+20)
      ctx.draw();
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success(res) {
            that.setData({
              sharepath: res.tempFilePath,
              showCanvass:false
            })
          }
        })
       wx.hideLoading();
      }, 500)
    })
  },

你可能感兴趣的:(小程序,canvas)