鸿蒙Next如何实现自定义相机给照片添加水印

在鸿蒙Next开发中，如何实现自定义相机功能并给拍摄的照片添加水印？具体需要调用哪些API或组件？有没有完整的代码示例可以参考？另外，水印的位置和样式能否自定义？

2 回复

鸿蒙Next自定义相机加水印？简单！先开相机，然后像贴小广告一样把水印贴上去。用PixelMap画个“版权所有，盗图必究”，再用ImageReceiver一合成。代码几行搞定，照片瞬间高大上！记得别把水印贴脸上，不然模特会生气哦~ 😄

更多关于鸿蒙Next如何实现自定义相机给照片添加水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过自定义相机和图像处理功能为照片添加水印。以下是实现步骤和示例代码：

1. 配置权限

在 module.json5 中声明相机和存储权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.CAMERA"
      },
      {
        "name": "ohos.permission.WRITE_IMAGE_VIDEO"
      }
    ]
  }
}

2. 创建自定义相机

使用 Camera 和 XComponent 组件实现相机预览：

import camera from '@ohos.multimedia.camera';
import image from '@ohos.multimedia.image';

// 初始化相机
let cameraManager = camera.getCameraManager(context);
let cameras = cameraManager.getSupportedCameras();
let cameraInput = cameraManager.createCameraInput(cameras[0]);

// 创建预览输出
let previewOutput = cameraManager.createPreviewOutput(previewSurface);

// 创建拍照输出
let photoOutput = cameraManager.createPhotoOutput(photoSurface);

// 会话配置并启动
let session = cameraManager.createCaptureSession();
session.beginConfig();
session.addInput(cameraInput);
session.addOutput(previewOutput);
session.addOutput(photoOutput);
session.commitConfig();
session.start();

3. 捕获并添加水印

在拍照回调中处理图像：

// 注册拍照回调
photoOutput.on('captureEnd', (err, captureInfo) => {
  if (err) return;
  
  // 获取图像
  image.createImageReceiver().then((receiver) => {
    receiver.on('imageArrival', () => {
      receiver.readNextImage((err, img) => {
        // 转换为PixelMap进行处理
        img.createPixelMap().then((pixelMap) => {
          addWatermark(pixelMap);
        });
      });
    });
  });
});

// 添加水印函数
import { BusinessError } from '@ohos.base';

async function addWatermark(pixelMap: image.PixelMap) {
  const canvasRenderer = new CanvasRenderer();
  await canvasRenderer.initialize();
  
  // 绘制原始图像
  canvasRenderer.drawPixelMap(pixelMap, { x: 0, y: 0 });
  
  // 添加文字水印
  canvasRenderer.drawText({
    text: 'HarmonyOS',
    x: pixelMap.getImageInfo().size.width - 200,
    y: pixelMap.getImageInfo().size.height - 50,
    font: { size: 30, color: '#FFFFFF' }
  });
  
  // 生成带水印的PixelMap
  const watermarkedPixelMap = await canvasRenderer.flush();
  
  // 保存到相册
  const photoAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
  photoAccessHelper.createAsset().then((uri) => {
    image.createImagePacker().packToFile(watermarkedPixelMap, uri);
  });
}

4. 关键说明

  • 使用 CanvasRenderer 进行2D绘制实现水印
  • 水印位置通过坐标动态计算（示例为右下角）
  • 文字样式可自定义（颜色、大小、字体）
  • 需要处理图像保存到相册的权限和路径

注意事项：

  1. 需在真机测试相机功能
  2. 水印内容支持文字/图片（通过drawImage方法）
  3. 建议异步处理图像避免阻塞UI

通过以上步骤即可在鸿蒙Next中实现带水印的自定义相机功能。

回到顶部