IONIC3 修改拍照插件cordova-plugin-camera-preview 添加水印

一、背景与问题

在移动应用开发中，实时预览拍照功能是常见需求。IONIC3通过cordova-plugin-camera-preview插件提供了高效的拍照预览能力。然而，该插件默认不支持添加水印功能，这在一些需要品牌标识、版权信息或个性化标识的场景中会带来限制。

传统解决方案是通过后处理图像，但这种方法存在以下问题：

水印需要在拍照后处理，会增加用户等待时间
大部分图像处理会消耗大量内存
无法实现实时预览水印效果
可能导致内存溢出（OOM）风险

为了解决这些问题，我们需要深入理解插件的工作原理，并在插件层添加水印处理逻辑。

二、基本原理

cordova-plugin-camera-preview插件的核心原理是通过调用原生Android的Camera API，创建预览界面并获取图像数据。其工作流程如下：

调用CameraPreview.startCamera()启动摄像头
通过CameraPreview.takePicture()获取原始图像数据
原始图像数据经过CameraPreview处理后返回给前端
前端可对处理后的图像进行进一步操作

要添加水印，需要在图像处理阶段插入水印合成逻辑。具体步骤包括：

获取原始图像数据
创建水印图层
合成水印与原始图像
返回处理后的图像

三、环境准备

3.1 项目配置

确保项目已正确安装插件：

ionic cordova plugin add cordova-plugin-camera-preview
npm install @ionic-native/camera-preview

3.2 权限配置

在config.xml中添加必要权限：

<edit-config target="/manifest/application" mode="merge">
  <preference name="AndroidManifest" value="android.permission.CAMERA" />
</edit-config>
<edit-config target="/manifest/application" mode="merge">
  <preference name="AndroidManifest" value="android.permission.WRITE_EXTERNAL_STORAGE" />
</edit-config>

四、核心实现

4.1 原生插件修改（Android）

在platforms/android/app/src/main/java/com/ionic/camera/目录下找到CameraPreview.java文件，修改其图像处理逻辑：

public class CameraPreview extends CordovaPlugin {
    // ...原有代码...

    public void takePicture() {
        // 获取原始图像数据
        byte[] imageBytes = captureImage();
        
        // 添加水印处理
        byte[] watermarkedImage = addWatermark(imageBytes);
        
        // 返回处理后的图像
        this.successCallback(watermarkedImage);
    }

    private byte[] addWatermark(byte[] imageBytes) {
        // 1. 将字节数据转换为Bitmap
        Bitmap originalBitmap = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);
        
        // 2. 创建水印图层
        Bitmap watermark = createWatermark(originalBitmap.getWidth(), originalBitmap.getHeight());
        
        // 3. 合成水印与原始图像
        Bitmap resultBitmap = Bitmap.createBitmap(originalBitmap.getWidth(), originalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(resultBitmap);
        
        // 原始图像绘制
        canvas.drawBitmap(originalBitmap, 0, 0, null);
        
        // 水印绘制（透明度50%）
        Paint paint = new Paint();
        paint.setAlpha(128); // 50%透明度
        canvas.drawBitmap(watermark, 0, 0, paint);
        
        // 4. 转换为字节数据返回
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        resultBitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream);
        return outputStream.toByteArray();
    }

    private Bitmap createWatermark(int width, int height) {
        // 创建半透明水印图层
        Bitmap watermark = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(watermark);
        
        // 绘制水印文字
        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setTextSize(60);
        paint.setAlpha(128);
        canvas.drawText("Sample Watermark", 50, 100, paint);
        
        return watermark;
    }
}

4.2 前端调用示例

import { CameraPreview } from '@ionic-native/camera-preview/ngx';

constructor(private cameraPreview: CameraPreview) {}

takePhoto() {
  this.cameraPreview.startCamera({
    position: 'back',
    previewWidth: 320,
    previewHeight: 240,
    tapToFocus: true
  }).then(() => {
    this.cameraPreview.takePicture({
      format: 'jpg',
      quality: 80
    }).then((imageData) => {
      // 此处获取的是带水印的图像数据
      console.log('Image with watermark:', imageData);
      
      // 可以直接显示在页面上
      this.cameraPreview.stopCamera();
    }).catch((err) => {
      console.error('Error taking picture:', err);
    });
  }).catch((err) => {
    console.error('Error starting camera:', err);
  });
}

4.3 水印参数配置

可以在cameraPreview.takePicture()调用时传递水印参数：

takePictureWithWatermark() {
  this.cameraPreview.takePicture({
    format: 'jpg',
    quality: 80,
    watermark: {
      text: '© 2023 MyApp',
      color: '#FFFFFF',
      opacity: 0.5,
      position: 'top-left',
      size: 48
    }
  }).then((imageData) => {
    console.log('Watermarked image:', imageData);
  });
}

五、完整案例

5.1 项目结构

my-app/
├── src/
│   └── app/
│       ├── pages/
│       │   └── camera/
│       │       └── camera.page.ts
│       └── app.module.ts
├── assets/
│   └── images/
│       └── watermark.png
├── package.json
├── config.xml
└── .gitignore

5.2 页面代码

// src/app/pages/camera/camera.page.ts
import { Component } from '@angular/core';
import { CameraPreview } from '@ionic-native/camera-preview/ngx';

@Component({
  selector: 'app-camera',
  templateUrl: 'camera.page.html',
  styleUrls: ['camera.page.scss']
})
export class CameraPage {
  constructor(private cameraPreview: CameraPreview) {}

  takePhoto() {
    this.cameraPreview.startCamera({
      position: 'back',
      previewWidth: 320,
      previewHeight: 240,
      tapToFocus: true
    }).then(() => {
      this.cameraPreview.takePicture({
        format: 'jpg',
        quality: 80,
        watermark: {
          text: 'Sample Watermark',
          color: '#FFFFFF',
          opacity: 0.7,
          position: 'top-right',
          size: 56
        }
      }).then((imageData) => {
        // 显示图片
        this.cameraPreview.stopCamera();
      }).catch((err) => {
        console.error('Error taking picture:', err);
      });
    }).catch((err) => {
      console.error('Error starting camera:', err);
    });
  }
}

5.3 页面模板

<!-- src/app/pages/camera/camera.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>拍照</ion-title>
    <ion-button (click)="takePhoto()">拍照</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-img [src]="imageSource" [style.width]="'100%'"></ion-img>
</ion-content>

六、源码解析

6.1 图像处理流程

图像采集：通过CameraPreview获取原始图像数据，这是未经过任何处理的原始像素数据
水印合成：在addWatermark方法中，使用Android的Canvas API进行图像合成：
- 使用Bitmap.createBitmap()创建新的图像位图
- 使用Canvas.drawBitmap()绘制原始图像
- 使用Paint.setAlpha()设置水印透明度
- 使用Canvas.drawText()绘制水印文字
数据转换：将处理后的图像转换为byte[]格式返回给前端

6.2 水印参数配置

水印参数通过watermark对象传递，支持以下配置项：

text：水印文字内容
color：文字颜色（十六进制格式）
opacity：透明度（0-1）
position：水印位置（top-left, top-right, bottom-left, bottom-right）
size：文字字号大小

七、进阶使用

7.1 动态水印

可以在应用中动态切换水印内容：

changeWatermark(text: string) {
  this.cameraPreview.takePicture({
    format: 'jpg',
    quality: 80,
    watermark: {
      text: text,
      color: '#FF0000',
      opacity: 0.8,
      position: 'bottom-left',
      size: 50
    }
  }).then((imageData) => {
    console.log('Dynamic watermark image:', imageData);
  });
}

7.2 多图层水印

支持叠加多个水印图层：

private Bitmap addMultiWatermarks(Bitmap originalBitmap) {
  Bitmap result = Bitmap.createBitmap(originalBitmap.getWidth(), originalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(result);
  
  // 绘制第一个水印
  Paint paint1 = new Paint();
  paint1.setColor(Color.WHITE);
  paint1.setAlpha(128);
  canvas.drawBitmap(createWatermark1(originalBitmap.getWidth(), originalBitmap.getHeight()), 0, 0, paint1);
  
  // 绘制第二个水印
  Paint paint2 = new Paint();
  paint2.setColor(Color.RED);
  paint2.setAlpha(128);
  canvas.drawBitmap(createWatermark2(originalBitmap.getWidth(), originalBitmap.getHeight()), 0, 0, paint2);
  
  return result;
}

八、性能与工程实践

8.1 性能优化

分辨率控制：建议将预览分辨率设置为320x240，避免高分辨率导致内存占用过高
缓存机制：对常用水印进行缓存，避免重复创建
异步处理：将水印处理逻辑放在子线程中执行，避免阻塞主线程
内存管理：在不再需要时及时释放Bitmap对象

8.2 异常处理

空指针检查：

if (originalBitmap != null) {
  // 处理逻辑
}

内存不足处理：

try {
  Bitmap result = Bitmap.createBitmap(...);
} catch (OutOfMemoryError e) {
  // 释放内存
  System.gc();
}

8.3 安全考虑

图像数据安全：建议在本地存储时使用加密算法
水印内容安全：避免在水印中存储敏感信息
权限控制：仅在必要时申请权限，避免过度权限申请

九、常见问题与踩坑

9.1 常见错误

错误：水印不显示
- 原因：未正确设置透明度（setAlpha）
- 解决：确保Paint.setAlpha()值在0-255之间
错误：内存溢出（OOM）
- 原因：处理高分辨率图像时未释放资源
- 解决：使用Bitmap.recycle()释放资源
错误：水印位置错误
- 原因：未正确计算坐标
- 解决：使用Canvas.translate()调整位置

9.2 性能陷阱

过度处理：在takePicture()中进行复杂处理会阻塞主线程
资源泄露：未正确释放Bitmap对象导致内存泄漏
分辨率不一致：不同设备的图像分辨率差异导致水印位置偏移

9.3 安全风险

图像篡改风险：水印可能被恶意移除
隐私泄露：水印中可能包含用户敏感信息
数据存储风险：未加密的图像数据可能被读取

十、最佳实践

10.1 推荐做法

使用标准水印：采用固定水印内容，避免动态内容
控制分辨率：将预览分辨率设置为320x240
异步处理：将水印处理放在子线程中
资源回收：在不再需要时及时释放Bitmap对象

10.2 推荐配置

takePictureWithWatermark() {
  this.cameraPreview.takePicture({
    format: 'jpg',
    quality: 80,
    watermark: {
      text: '© 2023 MyApp',
      color: '#FFFFFF',
      opacity: 0.7,
      position: 'top-left',
      size: 56
    }
  }).then((imageData) => {
    console.log('Watermarked image:', imageData);
  });
}

10.3 推荐工具

Android Profiler：用于监控内存和CPU使用情况
LeakCanary：检测内存泄漏
Android Studio Debug Tools：用于调试图像处理过程

十一、总结

通过修改cordova-plugin-camera-preview插件，我们实现了在拍照时添加水印的功能。该方案具有以下特点：

优势：

实现实时预览水印
保持图像质量
无需后处理
可扩展性强

适用场景：

品牌应用
企业级应用
需要个性化标识的场景
需要快速反馈的场景

不适用场景：

需要高精度图像处理的场景
需要复杂图像特效的场景
对性能要求极高的场景

在实际开发中，需要根据具体需求选择合适的方案。对于大多数需要添加水印的场景，本方案是合理的选择。但需要注意内存管理和性能优化，避免出现内存溢出等问题。同时，要确保水印内容的安全性，避免敏感信息泄露。

IONIC3 修改拍照插件cordova-plugin-camera-preview 添加水印

IONIC3 修改拍照插件cordova-plugin-camera-preview 添加水印

一、背景与问题

二、基本原理

三、环境准备

3.1 项目配置

3.2 权限配置

四、核心实现

4.1 原生插件修改（Android）

4.2 前端调用示例

4.3 水印参数配置

五、完整案例

5.1 项目结构

5.2 页面代码

5.3 页面模板

六、源码解析

6.1 图像处理流程

6.2 水印参数配置

七、进阶使用

7.1 动态水印

7.2 多图层水印

八、性能与工程实践

8.1 性能优化

8.2 异常处理

8.3 安全考虑

九、常见问题与踩坑

9.1 常见错误

9.2 性能陷阱

9.3 安全风险

十、最佳实践

10.1 推荐做法

10.2 推荐配置

10.3 推荐工具

十一、总结

评论已关闭

推荐阅读