uniapp拍照加水印

拍照功能实现

使用uniapp的uni.chooseImage或uni.chooseMedia API调用系统相机或相册，支持多平台兼容。示例代码：

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    this.addWatermark(tempFilePath); // 调用加水印方法
  }
});

水印生成方案

Canvas绘制水印

1. 创建Canvas画布，加载图片后绘制文字或图片水印：

   const ctx = uni.createCanvasContext('watermarkCanvas');
   ctx.drawImage(tempFilePath, 0, 0, width, height);
   ctx.setFontSize(20);
   ctx.fillText('水印文字', x, y);
   ctx.draw();

Base64水印叠加
通过uni.getFileSystemManager读取图片为Base64，使用第三方库（如canvas-tools）处理水印后保存：

const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: tempFilePath,
  encoding: 'base64',
  success: (res) => {
    // 使用库处理Base64数据并添加水印
  }
});

水印样式配置

• 文字水印：支持自定义字体、颜色、透明度（通过ctx.globalAlpha设置）
• 图片水印：需预先准备PNG透明水印图，通过drawImage叠加
• 平铺水印：循环计算坐标位置，重复绘制水印

保存与上传

使用uni.canvasToTempFilePath将Canvas转为图片，再通过uni.saveImageToPhotosAlbum保存到相册或调用上传接口：

uni.canvasToTempFilePath({
  canvasId: 'watermarkCanvas',
  success: (res) => {
    uni.saveImageToPhotosAlbum({
      filePath: res.tempFilePath
    });
  }
});

注意事项

• iOS系统需在manifest.json中配置相机和相册权限
• Canvas在部分安卓机型可能存在兼容性问题，建议测试后调整绘制逻辑
• 水印内容需符合法律法规，避免侵权风险