利用uniapp实现图片水印功能

<template><view class="container"><canvas class="canvas" id="myCanvas"></canvas></view></template><script>export default {  data() {    return {      canvasId: "",      imageUrl: "",      watermarkText: "Watermark",    };  },  methods: {    // 获取canvas的id    onCanvasId(e) {      this.canvasId = e.mp.detail.canvasId;      this.drawImage();    },    // 绘制图片和水印    drawImage() {      const ctx = uni.createCanvasContext(this.canvasId, this);      const canvasWidth = 300;      const canvasHeight = 300;      // 绘制图片      ctx.drawImage(this.imageUrl, 0, 0, canvasWidth, canvasHeight);      // 绘制水印      ctx.setFontSize(16);      ctx.setFillStyle("rgba(255, 255, 255, 0.5)");      ctx.setTextBaseline("middle");      ctx.setTextAlign("center");      ctx.fillText(        this.watermarkText,        canvasWidth / 2,        canvasHeight / 2      );      ctx.draw(false, () => {        // 将canvas转换为图片        uni.canvasToTempFilePath(          {            canvasId: this.canvasId,            success: (res) => {              // 保存水印图片              this.saveImage(res.tempFilePath);            },            fail: () => {              console.log("canvasToTempFilePath failed");            },          },          this        );      });    },    // 保存图片    saveImage(path) {      uni.saveImageToPhotosAlbum({        filePath: path,        success: () => {          uni.showToast({            title: "图片保存成功",            icon: "success",            duration: 2000,          });        },        fail: () => {          uni.showToast({            title: "图片保存失败",            icon: "none",            duration: 2000,          });        },      });    },  },  mounted() {    // 设置原始图片路径    this.imageUrl = "xxx";  },};</script>