微信小程序-名片生成

1.生成小程序码

调用后台接口返回base64格式的小程序码，需要将其转成临时图片

js 复制代码

const _this = this;
console.log(this);
uni.showLoading({
        title:'名片生成中',
        mask:false,
})
// this.getImgSize();
getUnlimitedQRCode({
        path: 'subpackage/detail/detail',
        width: 280,
        isHyaline: true, // 默认是false，是否需要透明底色，为 true 时，生成透明底色的小程序
        scene: 'id=' + this.record.id
}).then(res => {
        _this.qrcode = res.data;
        let imgPath = wx.env.USER_DATA_PATH + '/index' + 'qrcode' + '.png';
        let imageData = res.data.replace(/^data:image\/\w+;base64,/, "");
        let fs = wx.getFileSystemManager();
        fs.writeFileSync(imgPath, imageData, "base64");
        console.log(imgPath, 'imgPath-----')
        _this.qrcode = imgPath;
        _this.$nextTick(function() {
                _this.creatCanvas(this.record);
        })
})

2. canvas图片绘制

creatCanvas方法

js 复制代码

creatCanvas(record) { //绘制成canvas
    let _this = this;

    let ctx = uni.createCanvasContext('myCanvas', this);
    // ctx.setFillStyle('#fff');
    // ctx.fillRect(0, 0, 312, 610);
    ctx.drawImage(this.canvasBg, 0, 0, 312, 610); //背景
    // ctx.setFillStyle('#fff');
    // ctx.fillRect(230, 512, 60, 60);
    ctx.drawImage(this.qrcode, 230, 512, 60, 60); //二维码
    // 绘制名字

    // 保存当前状态
    ctx.save()
    ctx.setFontSize(16);
    ctx.setFillStyle('#141B24');
    ctx.setTextAlign('left');
    const personName = record.personName && record.personName.length > 8 ? (record.personName.substring(0, 8) + '...') : record.personName;
    ctx.fillText(personName || '--', 72, 46);
    // 恢复状态
    ctx.restore()
    // 绘制详情
    this.drawerInfo(ctx, record.job, 280, 110);
    this.drawerInfo(ctx, record.orgName, 280, 155);
    this.drawerInfo(ctx, record.regionName, 280, 200);
    this.drawerInfo(ctx, record.categoryName, 280, 248);
    this.drawerInfo(ctx, record.phoneNum, 280, 298);
    this.drawerInfo(ctx, record.infoContactor, 280, 344);
    this.drawerInfo(ctx, record.remark, 280, 390);
    this.drawerInfo(ctx, record.address, 280, 438);
    this.drawerInfo(ctx, record.baseInfo, 280, 484);
    this.drawWatermark(ctx); // 生成水印
    ctx.draw(true, () => {
            setTimeout(() => {
                    uni.canvasToTempFilePath({
                            canvasId: 'myCanvas',
                            success: (res) => {
                                    _this.isShowShareImg = true;
                                    _this.showShareImg = res.tempFilePath;
                                    console.log(res.tempFilePath);
                            },
                            fail: () => {
                                    uni.showToast({
                                            title: '生成失败！',
                                            icon: "none"
                                    })
                            },
                            complete: () => {
                                    uni.hideLoading();
                                    _this.loading = false;
                            }
                    }, _this);
            }, 300);
    });
}

水印生成

js 复制代码

drawWatermark(ctx) {
  const text = storage.get(constant.name) + ' ' + storage.get(constant.phonenumber)
  // 清除画布


  // 设置文字样式
  ctx.setFontSize(12)
  ctx.setFillStyle('rgba(0, 0, 0, 0.08)');

  // 计算文字宽度
  const textMetrics = ctx.measureText(text)
  const textWidth = textMetrics.width

  // 计算水印绘制范围，确保边缘也能覆盖
  const drawWidth = 312 + 140
  const drawHeight = 460

  // 循环绘制水印
  for (let x = -textWidth; x < drawWidth; x += 170) {
    for (let y = 0; y < drawHeight; y += 150) {
      // 保存当前状态
      ctx.save()

      // 移动到绘制位置
      ctx.translate(x, y)

      // 旋转文字
      ctx.rotate(-45 * Math.PI / 180)

      // 绘制文字
      ctx.fillText(text, 0, 0)

      // 恢复状态
      ctx.restore()
    }
  }
  // 绘制到画布
}

调用ctx.draw需要一个延时操作，避免canvas还未完全绘制完成，造成