小程生成海报转发

 //将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
  createNewImg: function (that) {
    let  { indexImg, activityInfo, qrcode, logUrl} = that.data
    let imginfo = activityInfo.data.userHelpList
    const wxGetImageInfo = promisify(wx.getImageInfo)
 
    Promise.all([
      wxGetImageInfo({
        src: activityInfo.data.activity.info.share_image
      }),
      wxGetImageInfo({
        src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/poster_cloud.png?v=3.1.7'
      }),
      wxGetImageInfo({
        src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/poster_bg.png?v=3.1.7'
      }),
      wxGetImageInfo({
        src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/fingerprint.png?v=3.1.7'
      }),
      wxGetImageInfo({
        src: imginfo[imginfo.length-1].user_info.pic
      }),
      wxGetImageInfo({
        src: logUrl
      }),
    ]).then(res => {
      console.log(res)
      const ctx = wx.createCanvasContext('mycanvas')
      // 底图
      ctx.setFillStyle("#FFF")
      ctx.fillRect(0, 0, 390, 1200)
      ctx.drawImage(res[0].path, 0, 0, 390, 330)
      ctx.drawImage(res[1].path, 0, 290, 390, 800)
      ctx.drawImage(res[2].path, 0, 350, 370, 350)
      ctx.drawImage(res[3].path, 200, 520, 100, 100)
      circleImg(ctx,res[4].path, 150, 330, 30, 30)
      ctx.drawImage(res[5].path, 50, 510, 120, 120)
      //绘制标语
      ctx.setFontSize(16);
      ctx.lineWidth = 10;
      var titleHeight = 440; // 标题的高度
      var canvasWidth = 300;//计算canvas的宽度
      var initHeight = 430;
      var str = `${activityInfo.data.activity.mark}活动价${activityInfo.data.activity.price}砍至底价仅需${activityInfo.data.activity.price_mix}元,快来帮我砍砍砍!`
      ctx.setFillStyle('#333333');
      ctx.setTextAlign('left');
      titleHeight = this.drawText(ctx, str, initHeight, titleHeight, canvasWidth);
      ctx.moveTo(40, titleHeight)
      ctx.lineTo(325, titleHeight)
      ctx.setLineWidth(0.5)
      ctx.setStrokeStyle('#64b28d')
      ctx.stroke();
      
      // 文字
      ctx.setTextAlign('center')    // 文字居中
      ctx.setFillStyle('#000000')  // 文字颜色:黑色
      ctx.setFontSize(16)         // 文字字号
      ctx.fillText("扫一扫或长按识别二维码", 370 / 2, 659)
      // 小程序码
      const qrImgSize = 200
      // ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
      ctx.stroke()
      ctx.draw()
    })
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 3500
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          // var a = tempFilePath + "?unixtimestamp=" + Math.round(new Date().getTime() / 1e3)
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          })
        },
        fail: function (res) {
          console.log(res,'1111111111');
        }
      });
      wx.hideToast()
    }, 3000);
   
  },
  //点击保存到相册
  baocun: function () {
    var that = this
    console.log('path',that.data.imagePath)
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册,赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },

   //文字换换行
  drawText: function (ctx, str, initHeight, titleHeight, canvasWidth) {
    var lineWidth = 0;
    var lastSubStrIndex = 0; //每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > canvasWidth) {
        ctx.fillText(str.substring(lastSubStrIndex, i), 35, initHeight);//绘制截取部分
        initHeight += 30;//20为字体的高度
        lineWidth = 0;
        lastSubStrIndex = i;
        titleHeight += 30;
      }
      if (i == str.length - 1) {//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), 35, initHeight);
      }
    }
    // 标题border-bottom 线距顶部距离
    titleHeight = titleHeight + 10;
    return titleHeight
  },

  //转发生成海报
  GetBargainPoster:function(){ 
    console.log("最终调用",this.data.logUrl)
     var that = this;
    this.setData({
      maskHidden: false,
      shareMenuHidden: !0
    });
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 3500
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg(that);
    }, 3000)  
    that.setData({
      maskHidden: true
    }); 
  },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值