微信小程序cavans生成海报,并预览

样式

主要是定义宽高,采用fixed定位,画的时候在屏幕外(测试的时候可以先去掉定位查看效果)

生成海报的方法

//生成海报
  shareHaiBao(e) {
    showToast('正在生成...', 'loading', 2000);
    let that = this;
    // 获取到当前用户信息
    let userInfo = this.data;
    console.log(userInfo)
    let promise = new Promise((resolve, reject) => {
      wx.downloadFile({
        url: 'https://www.abc.com/imgs/front/images/nodata.jpg', //仅为示例，并非真实的资源
        success: function(res) {
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
          if (res.statusCode === 200) {
            wx.playVoice({
              filePath: res.tempFilePath
            })
            let filePath = res.tempFilePath;
            console.log("ok")
            resolve(filePath);
          }
        }
      })
    });
    promise.then(res => {
      console.log(res);
      let data = {
        user: userInfo,
        avarUrl: res
      }
      this.canvansWrite(data)   //绘制画布
        .then(res => {
          that.previewImg(res)   //预览图片
        })
    }, err => {
      console.log(err)
    })
    // 绘制画布

  },

绘制画布js代码

注意事项:
1.这里用promise实现绘制完成后再预览的效果
2.canvansWrite(user) user: 在这里因为我需要用到的绘制的参数通过user传过来
3.可以从第四点开始看
4.绘制圆形一般是先画外圆,再绘制头像
5.绘制文字,第6点用到文字的坐标,绘制的都是汉字时可以用字符串个数*每个字体长度计算出总长,方便文字居中,字符串中涉及到数字时数字长度和汉字不一致,不适用
6.注意绘制图片的时候,如果用的是线上的图片 需要 在线图片地址转换为本地图片,才能绘制
两个方法:一个是wx.getImageInfo()详情可以看官方文档
另一个是用wx.downloadFile()的api将图片下载下来然后 保存到临时缓存中,绘制头像的shareHaiBao()中就使用了该方法

canvansWrite(user) {
    let that = this;
    return new Promise((resolve, reject) => {
      // 1.获取屏幕宽高
      console.log(this.data);
      // 2.获取头像的地址
      let aver = user.avarUrl;
      console.log(aver);

      // 3.画布的参数
      const data = {
        x: 0,
        y: 0,
        wid: that.data.canvasWidth,
        height: that.data.canvasHeight
      }
      // 4.开始绘制背景图,这里用本地的图片
      ctx = wx.createCanvasContext('myCanvas')      
      ctx.drawImage('/images/haibao.jpg', data.x, data.y, data.wid, data.height)
      // ctx.draw()

      // 5.绘制头像(这里没有绘制,只是拿到坐标,因为我的项目中用不到)
      let avatarurl_width = data.wid * 0.2, //绘制的头像宽度
        avatarurl_heigth = data.wid * 0.2, //绘制的头像高度
        avatarurl_x = data.wid / 2 - avatarurl_width / 2, //绘制的头像在画布上的位置坐标
        avatarurl_y = 36;

      // 6.绘制工作名称(就是绘制文字,6.7一样)
      let nickName = user.user.demanditem.jobName;
      console.log(nickName);
      let nickLen = nickName.toString().length; // 用户名长度
      let max_nickname_width = nickLen * 30; //一个汉字的宽度为15,获取文字总宽度

      ctx.setFillStyle('#060614'); // 文字颜色
      ctx.setFontSize(30); // 文字字号
      ctx.fillText(nickName, data.wid / 2 - max_nickname_width / 2, data.height * 0.2);
      ctx.font = 'normal 10px sans-serif';


      // 7.绘制薪资文字
      let des = user.user.demanditem.salary;
      des = '综合薪资:' + des + '元';
      console.log(nickName);
      let desLen = des.toString().length; // 用户名长度
      console.log(desLen);
      let max_des_width = desLen * 25; //一个汉字的宽度为10,获取文字总宽度

      ctx.setFillStyle('#060614');
      ctx.setFontSize(25);
      ctx.fillText(des, data.wid * 0.2, data.height * 0.4);
      ctx.font = 'normal 10px sans-serif';


      // 招聘人
      let realName = user.user.demanditem.realName;
      realName = realName + '正在寻找合作伙伴,快来看看吧';
      console.log(realName);
      let realNameLen = realName.toString().length; // 用户名长度
      console.log(desLen);
      let max_realName_width = realNameLen * 10; //一个汉字的宽度为10,获取文字总宽度

      ctx.setFillStyle('#444543');
      ctx.setFontSize(10);
      ctx.fillText(realName, data.wid * 0.2, data.height * 0.45);
      ctx.font = 'normal 10px sans-serif';

      // 8.绘制二维码
      let twoImgUrl = that.data.twoImgUrl;
      console.log('二维码地址:' + twoImgUrl);
      let twoImg_width = data.wid * 0.2, //绘制的二维码宽度
        twoImg_heigth = data.wid * 0.2, //绘制的二维码高度
        twoImg_x = data.wid / 2 - avatarurl_width / 2, //绘制的头像在画布上的位置
        twoImg_y = 36;
      ctx.save(); //
      ctx.beginPath();
      ctx.arc(avatarurl_width / 2 + avatarurl_x, data.height * 0.66 + twoImg_heigth / 2, avatarurl_width / 2, 0, Math.PI * 2, false);
      ctx.clip();


      //wx.getImageInfo 在线图片地址转换为本地图片,才能绘制
      wx.getImageInfo({        
        src: twoImgUrl,
        success: function(res) {
          ctx.drawImage(res.path, avatarurl_x, data.height * 0.66, avatarurl_width, avatarurl_heigth);
          ctx.restore();
          ctx.draw(false, function() {
            console.info('绘制成功');
            setTimeout(function() {
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                quality: '1',
                success: function(res) {
                  let tempFilePath = res.tempFilePath;

                  resolve(tempFilePath);   //将临时图片地址暴露出去,这里用promise方便在绘制完成之后再执行预览

                  that.setData({
                    imagePath: tempFilePath,
                    hide_poster: false
                  });
                  console.log("图片下载到临时文件夹了")
                },
                fail: function(res) {
                  console.log(res);
                }
              }, that);
            }, 3000);
          });
        } 
      })

    });

  },

预览图片api

 //预览图片
  previewImg(tempFilePath) {
    console.log(this.data.imagePath)
    console.log(tempFilePath);
    if (tempFilePath) {
      //预览图片，预览后可长按保存或者分享给朋友
      wx.previewImage({
        urls: [tempFilePath]
      })
    }
  },