小程序，选择颜色，去水印

// 在页面中添加一个 canvas 组件
<canvas canvas-id="myCanvas" bindtap="handleTap"></canvas>

// 在页面的 js 文件中处理图片
Page({
  data: {
    imgUrl: '', // 存储用户选择的图片路径
    startX: 0, // 用户指定区域的起始坐标X
    startY: 0, // 用户指定区域的起始坐标Y
    endX: 100, // 用户指定区域的结束坐标X
    endY: 100, // 用户指定区域的结束坐标Y
    replaceColor: '#ff0000', // 替换的颜色，默认为红色
  },

  chooseImage() {
    wx.chooseImage({
      success: (res) => {
        const imgUrl = res.tempFilePaths[0];
        this.setData({ imgUrl });
        this.removeWatermark(imgUrl);
      },
    });
  },

  handleStart(e) {
    // 记录用户选择区域的起始坐标
    this.setData({
      startX: e.touches[0].x,
      startY: e.touches[0].y,
    });
  },

  handleMove(e) {
    // 记录用户选择区域的结束坐标
    this.setData({
      endX: e.touches[0].x,
      endY: e.touches[0].y,
    });
  },

  handleTap(e) {
    const { x, y } = e.detail;
    this.getColorAtPoint(x, y);
  },

  getColorAtPoint(x, y) {
    const ctx = wx.createCanvasContext('myCanvas');
    const pixelData = ctx.getImageData(x, y, 1, 1).data;
    const color = `rgba(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}, ${pixelData[3] / 255})`;
    console.log('Selected color:', color);

    // 将选取的颜色作为替换颜色
    this.setData({ replaceColor: color });
  },

  removeWatermark(imgUrl) {
    const { startX, startY, endX, endY, replaceColor } = this.data;
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(imgUrl, 0, 0, 300, 300); // 绘制原始图片

    // 在 canvas 上绘制指定区域
    ctx.setFillStyle(replaceColor); // 设置替换颜色
    ctx.fillRect(startX, startY, endX - startX, endY - startY); // 绘制用户指定的区域

    ctx.draw(false, () => {
      // 保存处理后的图片
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          const tempFilePath = res.tempFilePath;
          console.log(tempFilePath); // 处理后的图片路径
        },
      });
    });
  },
});