uniapp给图片添加水印功能

做水印没问题，现在遇到的问题的不能和原的尺寸保存一致，问了各大ai平台都没有很好解决这个问题

<template>
  <view class="content">
    <canvas canvas-id="watermarkCanvas"  style="height: 1920px;width: 1080px;"></canvas>
    <!-- 拍照按钮 -->
    <button type="primary" @click="takePhoto">拍照并生成水印</button>
    <!-- 预览图片 -->
    <image v-if="watermarkedImagePath" :src="watermarkedImagePath"
      @click="previewWatermarkedImage(watermarkedImagePath)" mode="aspectFit" style="width: 100%;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      watermarkedImagePath: '' // 保存生成的带水印图片的路径
    }
  },
  methods: {
    // 拍照并生成水印
    takePhoto() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'], // 使用摄像头拍照或从相册选择
        success: (res) => {
          const filePath = res.tempFilePaths[0];
          console.log('filePath', filePath);
          // 调用水印功能
          this.addWatermark(filePath);
        },
        fail: (err) => {
          console.error('Failed to take photo:', err);
        }
      });
    },
    // 添加水印并预览
    addWatermark(filePath) {
      // 获取图片信息
      uni.getImageInfo({
        src: filePath,
        success: (imageInfo) => {
          console.log('imageInfo', imageInfo);
          const { width, height } = imageInfo;

          // 创建 canvas 上下文
          const ctx = uni.createCanvasContext('watermarkCanvas',this);

          // 更新 canvas 的尺寸
         // this.updateCanvasSize('watermarkCanvas', width, height);

          // 绘制图片，保持图片的原始宽高
          ctx.drawImage(filePath, 0, 0, width, height,0,0,width,height);

          // 获取当前时间
          const currentTime = '2024-08-30 10:45:12';

          // 添加时间水印
          ctx.setFontSize(16);
          ctx.setFillStyle('white');
          ctx.fillText('时间：' + currentTime, 10, 30);

          // 添加地点水印（假设已经获取到了地理位置信息）
          ctx.fillText('位置: 广东省 广州市', 10, 60);

          // 添加天气水印（假设已经获取到了天气信息）
          ctx.fillText('天气: 晴朗 28℃ 东南风', 10, 90);

          // 添加Logo水印
          ctx.drawImage('/static/logo.png', 0, 0, 50, 50);

console.log(ctx)
          // 完成绘制后导出带水印的图片
          ctx.draw(true, () => {
            uni.canvasToTempFilePath({
              canvasId: 'watermarkCanvas',
              x: 0,
              y: 0,
              width: width, // 使用图片的宽度
              height: height, // 使用图片的高度
              destWidth: width,
              destHeight: height,
              success: (res) => {
                console.log('draw success', res);
                const watermarkedFilePath = res.tempFilePath;
                // 保存生成的水印图片路径
                this.watermarkedImagePath = watermarkedFilePath;

                // 预览图片
                //this.previewWatermarkedImage(watermarkedFilePath);
                // 保存到本地相册
                //this.saveToLocal(watermarkedFilePath);
                // 上传到服务器
                this.uploadToServer(watermarkedFilePath);
              },
              fail: (err) => {
                console.error('Failed to export the image:', err);
              }
            });
          });
        },
        fail: (err) => {
          console.error('Failed to get image info:', err);
        }
      });
    },
	updateCanvasSize(canvasId, width, height) {
	  const canvasNode = uni.createSelectorQuery().select(`#watermarkCanvas`).context();
	  canvasNode.exec((res) => {
		if (res && res[0]) {
		  res[0].canvas.width = width;
		  res[0].canvas.height = height;
		}
	  });
	},
    // 预览水印图片
    previewWatermarkedImage(imagePath) {
      uni.previewImage({
        urls: [imagePath], // 预览的图片数组
        current: imagePath // 当前显示的图片
      });
    },
    // 保存水印图片到本地相册
    saveToLocal(filePath) {
      uni.saveImageToPhotosAlbum({
        filePath: filePath,
        success: () => {
          uni.showToast({
            title: '图片已保存到相册',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('Failed to save image to album:', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    },
    // 上传水印图片到服务器
    uploadToServer(filePath) {
      uni.uploadFile({
        url: 'http://yz.test.top/test.php', // 替换成你的服务器上传地址
        filePath: filePath,
        name: 'file', // 后端接收图片的字段名
        success: (res) => {
          console.log('Upload success:', res);
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('Failed to upload image:', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.content {
  padding: 20px;
  text-align: center;
}

</style>