# Watermark

**Repository Path**: harmonyos_samples/watermark

## Basic Information

- **Project Name**: Watermark
- **Description**: 本示例为开发者展示常用的水印添加能力，包括两种方式给页面背景添加水印、保存图片添加水印、拍照图片添加水印。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 28
- **Forks**: 17
- **Created**: 2024-06-15
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Adding Watermarks

### Overview

This sample describes how to add watermarks to the page background during photo saving and photo shooting.

### Preview

| Home page                              | Add a watermark to the page            | Add a watermark to a photo              | Watermarking in pdf                   |
|----------------------------------------|----------------------------------------|-----------------------------------------|---------------------------------------|
| ![](./screenshots/devices/home-en.png) | ![](./screenshots/devices/page-en.png) | ![](./screenshots/devices/image-en.png) | ![](./screenshots/devices/pdf-en.png) |

### Instructions for Use
Open the Index page and click on different options to access specific pages
1. Use stack to add watermark: Display watermarks on the UI page by implementing a stacked layout with Stack.
2. Use overlay to add watermark: Display the watermark on the UI page by utilizing the overlay floating layer attribute.
3. Watermarking during photo saving: Click to download, and the saved image with a watermark will be visible in the system gallery.
4. Watermarking during photographing: Click "Take Photo," and the saved image with the watermark will be visible in the system gallery.
5. Watermarking in PDF: Click to download and view the generated PDF file with the watermark added.

### Project Directory

```
├──entry/src/main/ets/
│  ├──component
│  │  ├──NavBar.ets                     // Top navigation bar
│  │  └──Watermark.ets                  // Watermark component
│  ├──constants
│  │  ├──Utils.ets                      // Utils class
│  │  └──Constants.ets                  // Common constants
│  ├──entryability
│  │  └──EntryAbility.ets               // Entry point class
│  └──pages            
│     ├──CameraPage.ets                 // Add a watermark during photographing.
│     ├──Index.ets                      // Home page
│     ├──SaveImagePage.ets              // Add a watermark during photo saving.
│     ├──WatermarkPdfPage.ets           // Add a watermark in pdf.
│     ├──WatermarkCanvasPage.ets        // Use canvas to add a watermark to the page background.
│     └──WatermarkOverlay.ets           // Use overlay to add a watermark to the page background.
└──entry/src/main/resources             // Static resources of the app
```

### How to Implement

1. Add a watermark to the page: Encapsulate the Canvas-based watermark drawing component and use the Stack cascading layout or overlay floating layer attribute to integrate the watermark component with the page.
2. Add a watermark to a photo during saving: Obtain the photo, call **createPixelMap** to create a pixel map, call **OffScreenContext** to draw a watermark at the specified position, and save the image with the watermark.
3. Add a watermark to a photo during shooting: Open the camera, obtain the URI to the storage file, save the file URI to the sandbox, obtain the photo data, call **createPixelMap** to create a pixel map, draw a watermark, and save the image with the watermark.
4. Add watermarks to PDF files: Use the Pdfview preview component to preview PDF files, use the PDFService service to load PDF file, add watermark, and save PDF file.

### Required Permissions
N/A

### Dependencies
N/A

### Constraints

1. The sample is supported only on Huawei phones with standard systems.

2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later.

3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release SDK or later.