当前位置：首页 > uni-app

uniapp拍照加水印

2026-02-06 14:22:52uni-app

拍照功能实现

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

uniapp拍照加水印

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

水印生成方案

Canvas绘制水印

uniapp拍照加水印

创建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
    });
  }
});