鸿蒙(HarmonyOS)应用开发实战——水印案例

最新推荐文章于 2026-01-04 19:30:09 发布

原创

最新推荐文章于 2026-01-04 19:30:09 发布 · 1.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙开发 #组件化 #移动开发 #ArkUI #界面布局

往期推文全新看点

介绍

在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。

效果图预览

使用说明：

进入页面，页面背景显示水印效果。
长按轮播图片，弹出半模态弹窗，点击保存按钮，图片保存在图库中，查看图片，图片显示水印。

实现思路

本示例使用两种方法添加水印
方法一：Canvas组件绘制水印，然后将水印组件通过overlay属性将水印作为浮层放置在页面中
方法二：获取初始图片的pixelMap对象，通过OffscreenCanvas绘制水印，并生成一个新的pixelMap对象进行保存。

Canvas组件绘制水印

自定义一个WaterMarkView组件，在Canvas组件的onReady函数中执行内容的填入逻辑。context.fillStyle、context.font、context.textAlign以及textBaseline 来实现绘制的填充色、文本绘制中的字体大小、文本绘制中的文本对齐方式以及文本绘制中的水平对齐方式。

 Canvas(this.context)
   .width('100%')
   .height('100%')
   .hitTestBehavior(HitTestMode.Transparent)
   .onReady(() => {
   
   
     // TODO:知识点:通过canvas绘制水印
     this.context.fillStyle = '#10000000';
     this.context.font = '16vp';
     this.context.textAlign = 'center';
     this.context.textBaseline = 'middle';
     ...
   })