小程序添加水印

需求

需在小程序中把图片增加水印功能

分析

1. 把图片用 canvas 增加水印

解决

1. 在组件中监听图片引用值变化，进行相应转换

Component({
  behaviors: ['wx://form-field'],

  properties: {
    url: {
      type: String,
      value: '',
      async observer(value: string) {
        const relativeUrl = await waterMark(this, 'idcard-back-canvas', value, '仅用来实名认证');
        const waterMarkUrl = await API.getCosImageURL(relativeUrl);
        this.setData({ waterMarkUrl });
      }

2. 抽象增加水印方法

/**
 * 添加水印功能
 * @param context  上下文this
 * @param canvasId canvas-id
 * @param imgUrl 图片网络地址
 * @param markText 水印文案
 */
export const waterMark = async (
  context: any,
  canvasId: string,
  imgUrl: string,
  markText: string
) => {
  return new Promise((resovle, reject) => {
    wx.getImageInfo({
      src: imgUrl,
      success: (ress: any) => {
        logs.all("下载图片成功");
        // 在组件中使用， 需要传值上下文context
        let ctx = wx.createCanvasContext(canvasId, context);
        const { path, width: cavWidth, height: cavHeight } = ress;
        context.setData({ cavWidth, cavHeight });
        //将图片src放到cancas内，宽高为图片大小
        ctx.drawImage(path, 0, 0, cavWidth, cavHeight);
        // 设置中心原点并倾斜
        ctx.translate(cavWidth / 2, cavHeight / 2);
        ctx.rotate((-45 * Math.PI) / 180);
        ctx.setFontSize(48);
        ctx.setFillStyle("#eeeeee");
        ctx.fillText(markText, -160, 0);
        ctx.draw(false, () => {
          wx.canvasToTempFilePath(
            {
              x: 0,
              y: 0,
              width: cavWidth,
              height: cavHeight,
              destWidth: cavWidth,
              destHeight: cavHeight,
              canvasId: canvasId,
              success: async (res) => {
                logs.all("导出图片成功");
                const markedUrlPath = res.tempFilePath;
                const { result: markedUrl } = await API.uploadImage(
                  markedUrlPath,
                  false
                );
                resovle(markedUrl);
              },
              fail(res) {
                logs.all("导出图片失败", JSON.stringify(res));
                reject(JSON.stringify(res));
              },
            },
            context
          );
        });
      },
    });
  });
};

坑 在开发中遇到的问题

1. canvas 不显示 原因：组件中使用 canvas，需增加 this 参数

2. canvasToTempFilePath 报错 原因：组件中使用 canvas，需增加 this 参数

学习

1. 学会了 canvas 的 drawImage、rorate、translate 方法
2. 学会了增加水印功能