[移动开发]小程序生成海报携带参数-云函数生成二维码

1. 逻辑代码

 async qcFn() {
    console.log('生成海报');
    let that = this
    const houseId = this.data.houseDetail._id
    const refferId = app.globalData.openid
    // houseDetail?id=${this.data.houseDetail._id}&refferId=${app.globalData.openid}`);
    //换取海报地址
    const url = 'cloud://renthouse-3gy8st7ycb91abf9.7265-renthouse-3gy8st7ycb91abf9-1308122562/素材/编组 11.png'

    // 生成海报
    wx.showToast({
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    // that. ();
    setTimeout(function () {
      wx.hideToast()
      that.setData({
        maskHidden: true
      });
    }, 1000);
    // ********测试
    console.log('生成海报22');
    //获取数据
    this.setData({
      userInfo: app.globalData.userInfo,
    })
    let { houseDetail, title, location, tagselected, houseMoney } = this.data.houseDetail
    // const ctx = wx.createCanvasContext('mycanvas')
    const ctx = wx.createCanvasContext('starkImg')
    //清除画布上在该矩形区域内的内容
    ctx.clearRect(0, 0, 375, 670);
    // ctx.clearRect(0, 0, 291, 479);
    //设置填白色充色
    ctx.setFillStyle("#fff")
    //填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色
    ctx.fillRect(0, 0, 375, 670)
    // ctx.strokeStyle = ("red");//设置描边颜色
    // 背景图
    const bgc_tmp = await this.downloadFile(url)//海报的本地地址
    // const bgc_tmp = await this.getImageInfoFn(url)//海报的本地地址
    ctx.drawImage(bgc_tmp, 0, 0, 375, 670) //以iPhone 6尺寸大小为标准绘制图片
    ctx.setStrokeStyle('rgba(0, 0, 0, 0.06)');



    // 保存绘图上下文。
    ctx.save();
    // ctx.setShadow(10, 50, 50, 'rgba(0, 0, 0, 0.01)')
    ctx.setShadow(10, 50, 50, 'rgba(255, 255, 255, 1)')

    const x = 40
    const y = 44
    // const y = 444
    const w = 300
    // const h = 88
    const h = 488
    const r = 10
    ctx.beginPath();
    ctx.moveTo(x + r, y);

    // 右上角弧线
    ctx.arcTo(x + w, y, x + w, y + r, 10);
    // https://juejin.cn/post/6990910784523993118
    // http://www.yanghuiqing.com/web/350
    // 右下角弧线
    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    // 左下角弧线
    ctx.arcTo(x, y + h, x, y + h - r, r);
    // 左上角弧线
    ctx.arcTo(x, y, x + r, y, 10);


    ctx.fill() //对当前路径中的内容进行填充。默认的填充色为黑色。
    ctx.closePath() //关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。
    // ctx.stroke() //\描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。
    ctx.clip(); //从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
    console.log('生成海报33');
    // 房屋图片
    const house_tmp = await this.getImageInfoFn(this.data.houseDetail.pictures[0])//海报的本地地址
    console.log('生成海报44', house_tmp);
    ctx.drawImage(house_tmp, 40, 44, 300, 400)
    // ctx.save();
    //房源标题
    ctx.restore()//恢复之前保存的绘图上下文。
    ctx.setFontSize(16) //字体大小
    ctx.setFillStyle('rgba(51, 51, 51, 1)') //背景颜色，默认颜色为 black。
    ctx.setTextBaseline('top')
    const titlestr = this.fittingString(ctx, title, 290) //调用文本溢出的方法
    ctx.fillText(titlestr, 56, 452) //在画布上绘制被填充的文本

    console.log('house_tmp');
    // 地图坐标icon
    const mapicon = 'cloud://renthouse-3gy8st7ycb91abf9.7265-renthouse-3gy8st7ycb91abf9-1308122562/素材/map3.png'
    const mapicon_tmp = await this.getImageInfoFn(mapicon)//海报的本地地址
    ctx.drawImage(mapicon_tmp, 53, 500, 29, 29,)

    // 房源位置
    ctx.setTextBaseline('top') //文字对齐方式
    ctx.setFillStyle('rgba(102, 102, 102, 1)') //背景颜色，默认颜色为 black。
    // ctx.fillStyle('rgba(102, 102, 102, 1)')
    ctx.setFontSize(14) //字体大小
    ctx.fillText(location, 87, 510) //在画布上绘制被填充的文本
    // ctx.save()
    console.log('房源标签');
    // 房源标签
    // ctx.restore()//恢复之前保存的绘图上下文。
    ctx.setFillStyle('rgba(153, 153, 153, 0.8)') //背景颜色，默认颜色为 black。
    ctx.setFontSize(14) //字体大小
    ctx.fillText(tagselected[0], 56, 480);
    ctx.fillText(tagselected[1], 118, 480);

    // 房源价格
    ctx.setFillStyle('rgba(86, 119, 248, 1)') //背景颜色，默认颜色为 black。
    ctx.setFontSize(16) //字体大小
    ctx.fillText(`${houseMoney}元/月`, 260, 510);

    ctx.restore()//恢复之前保存的绘图上下文。
    //二维码信息 ---见云函数
    let qrResult = await wx.cloud.callFunction({
      name: "qrCodeFile",
      data: { type: "createQRCode", houseId, refferId }
    })
    const qrcode_tmp = await this.downloadFile(qrResult.result)//二维码的本地地址
    ctx.drawImage(qrcode_tmp, 68.29, 559.49, 72.16, 72.16);


    //长按识别二维码
    var qcInfo = "长按识别二维码";
    ctx.setFontSize(14) //字体大小
    // ctx.setFontSize(14);
    ctx.setTextBaseline('top') //文字对齐方式
    ctx.setFillStyle('#333');
    // ctx.font = 'normal bold 14px sans-serif';
    ctx.fillText(qcInfo, 161.08, 573.48);
    ctx.stroke('red');//画出当前路径的边框。默认颜色色为黑色


    //查看房源详情
    let titledel = "查看房源详情";
    ctx.setFontSize(14);
    ctx.setFillStyle('#333333'); //背景颜色
    // ctx.font = 'normal bold 18px sans-serif';
    ctx.fillText(titledel, 161.08, 607.056);
    // ctx.stroke();
    ctx.draw();


    console.log('生成海报55');

    setTimeout(function () {
      console.log('737');
      wx.canvasToTempFilePath({
        // x: 0,
        // y: 0,
        // width: 291,
        // height: 479,
        destWidth: 375,
        destHeight: 670,
        canvasId: 'starkImg',
        success: function (res) {
          console.log('制期间耗时', res);
          console.log(res.tempFilePath);
          that.setData({
            imagePath: res.tempFilePath,
            hidden: false
          })

          console.log('imagespath', that.data.imagePath);
          wx.hideLoading()

        },
        fail: function (res) {
          console.log(res)
        }
      })
    }, 500);


  },

2. 在线链接转本地链接

  // 在线链接转换本地链接地址
  async getImageInfoFn(Image) {
    let temp = await wx.getImageInfo({
      src: Image,
    })
    return temp.path
  }

3. 云函数

const cloud = require("wx-server-sdk")
const uuid = require('uuid')
cloud.init()
const db = cloud.database()
const wxContext = cloud.getWXContext()
exports.main = async (event, ctx) => {
  const uuidStr = uuid.v4().replace(/-/g, "")
  console.log('uuidStr', uuidStr);
  db.collection('qrcodeOptions').add({
    data: {
      uuid: uuidStr,
      options: event
    }
  })
  console.log('生成二维码', event);
  const result = await cloud.openapi.wxacode.getUnlimited({
    // wxacode.getUnlimited:获取小程序码，适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制
    page: 'packageA/pages/houseDetail/houseDetail',
    scene:`${uuidStr}`,
    // "scene": 'a=1',
    "checkPath": false,
    "envVersion": 'develop'
  })

  const upload = await cloud.uploadFile({
    // cloudPath: cloudPath,
    cloudPath: `QRCodeFolder/${Math.floor(Math.random() * 1000)}.png`,
    fileContent: result.buffer
  })
  console.log('upload', upload);
  return upload.fileID

}

4. html页面

html页面
  <view class='imagePathBox' hidden="{{maskHidden == false}}">
    <image src="{{imagePath}}" class='shengcheng' ></image>
    <button class='baocun' bindtap='baocun'>点击保存至相册,分享到朋友圈</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view> 
<view class="canvas-box">
    <canvas  style="width:375px;height:670px;position:fixed;top:9999px" canvas-id="starkImg"/>
</view>