鸿蒙next开发：页面添加水印-Canvas

最新推荐文章于 2025-06-16 22:04:33 发布

代码中的爱马仕

最新推荐文章于 2025-06-16 22:04:33 发布

阅读量1.2k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： harmonyos 华为 ubuntu 前端鸿蒙鸿蒙系统程序员

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140833810

介绍

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

效果图预览

使用说明：

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

实现思路

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

Canvas组件绘制水印

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

 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';
     ...
   })

2.通过context.fillText来进行内容的绘制，而for循环根据context.width和context.height来实现内容铺满整个画布。源码参考WaterMarkView.ets。

for (let i = 0; i < this.context.width / 120; i++) {
   this.context.translate(120, 0);
   let j = 0;
   for (; j < this.context.height / 120; j++) {
      this.context.rotate(-Math.PI / 180 * 30);
      this.context.fillText('水印水印', -60, -60);
      this.context.rotate(Math.PI / 180 * 30);
      this.context.translate(0, 120);
   }
   this.context.translate(0, -120 * j);
}

3.最后通过overlay属性将水印作为浮层放置在页面中。源码参考