uniapp相机加水印

实现相机拍照加水印功能

在UniApp中实现相机拍照并添加水印的功能，可以通过以下步骤完成：

使用uni.chooseImage或uni.chooseVideo选择图片或视频

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: function (res) {
    const tempFilePaths = res.tempFilePaths;
    // 添加水印处理
    addWatermark(tempFilePaths[0]);
  }
});

使用canvas绘制水印

function addWatermark(imagePath) {
  const ctx = uni.createCanvasContext('watermarkCanvas');
  ctx.drawImage(imagePath, 0, 0, 300, 200);

  ctx.setFontSize(16);
  ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
  ctx.fillText('Watermark Text', 20, 30);

  ctx.draw(false, function() {
    uni.canvasToTempFilePath({
      canvasId: 'watermarkCanvas',
      success: function(res) {
        const watermarkedPath = res.tempFilePath;
        // 使用处理后的图片
      }
    });
  });
}

实时相机预览加水印方案

如需在相机实时预览时添加水印，可使用更复杂的方案：

创建自定义相机组件

<camera style="width: 100%; height: 300px;"></camera>
<canvas canvas-id="watermarkCanvas" style="position: absolute; top: 0; left: 0;"></canvas>

使用定时器持续绘制水印

let timer = null;

function startCamera() {
  timer = setInterval(() => {
    const ctx = uni.createCanvasContext('watermarkCanvas');
    // 绘制水印内容
    ctx.setFontSize(20);
    ctx.setFillStyle('red');
    ctx.fillText(new Date().toLocaleString(), 10, 30);
    ctx.draw();
  }, 1000);
}

function stopCamera() {
  clearInterval(timer);
}

注意事项

确保在manifest.json中配置了所需权限：

{
  "permission": {
    "scope.camera": {
      "desc": "需要相机权限"
    }
  }
}

对于更复杂的水印需求，如旋转、透明度变化等效果，可以通过调整canvas绘图API参数实现。水印内容可以是文字、图片或两者结合，根据具体需求调整绘制逻辑。

图片处理完成后，可通过uni.saveFile将结果保存到本地，或直接上传至服务器。注意不同平台的文件路径处理差异，确保在各端都能正常访问文件资源。