Guides

Add Image Watermark

ComPDF supports two ways to add image watermarks:

API

late CPDFReaderWidgetController _controller;

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(),
    body: Column(children: [
      TextButton(onPressed: () async{
        // image file path
        // android platform support Uri format.
        // content://xxxx
        File imageFile = await extractAsset(context, 'images/logo.png');
        await controller.document.createWatermark(CPDFWatermark.image(
          imagePath: imageFile.path,
          opacity: 1,
          rotation: 45,
          pages: [0, 1, 2, 3],
          horizontalAlignment: CPDFWatermarkHorizontalAlignment.center,
          verticalAlignment: CPDFWatermarkVerticalAlignment.center,
        ));
      }, child: const Text('Add Image Watermark')),
      Expanded(child: CPDFReaderWidget(
        document: widget.documentPath,
        configuration: CPDFConfiguration(),
        onCreated: (controller) {
          setState(() {
            _controller = controller;
          });
        },
      ))
    ],));
}

UI Popup Approach

• Configure default watermark properties in CPDFConfiguration, such as image, opacity, and rotation.
• Call controller.showAddWatermarkView(CPDFWatermarkConfig config) to open the interactive watermark popup.

// Set default image watermark in configuration
final configuration = CPDFConfiguration(
  globalConfig: const CPDFGlobalConfig(
    watermark: CPDFWatermarkConfig(
      image: 'ic_logo',
      opacity: 120,
      rotation: -45
    )
  )
);

// Open watermark popup
controller.showAddWatermarkView(
  config: CPDFGlobalConfig(
    watermark: CPDFWatermarkConfig(
      image: 'ic_logo',
      opacity: 120,
      rotation: -45
    )
  )
);

Customizing Default Images

You need to handle default images differently for Android and iOS:

Android

1. Add the image to the resources folder:

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

1. Reference it in code using the file name without extension:

image: 'ic_logo'

iOS

1. Import the image into the project via Xcode:

1. Reference it in code using the file name without extension:

image: 'ic_logo'

Flutter Cross-Platform

You can also import the image into the Flutter project, copy it to device storage at runtime, and pass the local file path:

final imagePath = await extractAsset(context, 'images/ic_logo.png');
await controller.showAddWatermarkView(
  config: CPDFWatermarkConfig(
    image: imagePath.path,
    rotation: -45,
    opacity: 200,
    scale: 2.0
  ),
);