Guides

添加图片水印

ComPDF 支持 两种方式 添加图片水印：

编程方式

通过 createImageWatermark 和 document.createWatermark 创建图片水印，适合使用本地图片路径直接添加水印、无需打开水印弹窗的场景。

import {
  CPDFReaderView,
  createImageWatermark,
} from "@compdfkit_pdf_sdk/react_native";

const pdfReaderRef = useRef<CPDFReaderView>(null);

const addImageWatermark = async (imagePath: string) => {
  const result = await pdfReaderRef.current?._pdfDocument.createWatermark(
    createImageWatermark({
      imagePath,
      pages: [0, 1, 2, 3],
      scale: 0.5,
      rotation: 45,
      opacity: 1,
      horizontalAlignment: "center",
      verticalAlignment: "center",
    })
  );

  console.log("Add image watermark result:", result);
};

通过编程方式创建图片水印时，imagePath 必须是应用可访问的本地图片文件路径。

UI 弹窗方式

ComPDF React Native SDK 也支持通过 UI 交互形式添加图片水印，在 CPDFConfiguration 中配置水印默认样式，例如图片、透明度、旋转角度。

// 在配置中设置默认图片水印样式
ComPDFKit.getDefaultConfig({
  global: {
    watermark: {
      types: ['text', 'image'],
      image: 'ic_logo',
      opacity: 120,
      rotation: -45      
    }
  }
});

// 通过API打开添加水印弹窗
await pdfReaderRef.current?.showAddWatermarkView({
  types: ['text', 'image'],
  image: 'ic_logo',
  opacity: 120,  
  rotation: -45,
  opacity: 255,
});

要自定义默认的图片，您需要在Android和iOS中以不同的方式实现它们。

Android

1. 将图片文件添加到资源文件中

android/app/src/main/res/drawable/ic_logo.png

2. 使用不带扩展名的文件名在代码中引用它们：

image: 'ic_logo'

iOS

1. 将图片文件通过Xcode导入到项目中

2. 使用不带扩展名的文件名在代码中引用它们：

image: 'ic_logo'

其他方案

您可以将图片复制到设备本地存储，再传入图片的文件路径：

// 假设 imagePath 是图片的本地文件路径
const imagePath = 'data/user/0/com.compdfkit.reactnative.example/cache/temp/ic_logo.png';

await pdfReaderRef.current?.showAddWatermarkView({
  types: ['text', 'image'], 
  image: imagePath,
  opacity: 120,  
  rotation: -45,
  opacity: 255,
});