可可图片编辑 HarmonyOS（6）水印效果

前言

可可图片编辑 也实现了水印效果，这个功能的实现比较取巧。

在预览阶段，直接通过层叠布局来实现水印效果。

在保存图片时，使用组件截图 componentSnapshot 的知识实现保存图片。

developer.huawei.com/consumer/cn…

componentSnapshot 介绍

componentSnapshot 是 HarmonyOS提供的一个强大功能，允许开发者获取应用中组件的截图，生成 PixelMap 格式的图片数据。这对于实现分享功能、内容保存、动态生成图片等场景非常有用。

基本使用步骤

1. 准备工作：添加组件标识

首先需要为想要截图的组件添加唯一标识：

// 在build方法中为组件添加id
build() {
  Column() {
    // 需要截图的组件
    Column() {
      Text('这是要截图的内容')
        .fontSize(20)
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
    }
    .id('targetComponent') // 添加唯一标识
    
    // 其他UI组件...
  }
}

2. 获取截图的基本方法

方法一：异步获取（推荐）

import { image } from '@kit.ImageKit';

// 在按钮点击或其他事件中
async takeScreenshot() {
  try {
    // 获取UIContext
    const uiContext = this.getUIContext();
    
    // 使用componentSnapshot获取截图
    const pixelMap = await uiContext.getComponentSnapshot()
      .get('targetComponent', { 
        scale: 1.0, // 缩放比例
        waitUntilRenderFinished: true // 等待渲染完成
      });
    
    // 处理截图结果
    this.handleScreenshotResult(pixelMap);
  } catch (error) {
    console.error('截图失败:', error);
  }
}

// 处理截图结果
handleScreenshotResult(pixelMap: image.PixelMap) {
  // 可以显示在Image组件中
  this.screenshotImage = pixelMap;
  
  // 或者保存到文件
  // this.saveToFile(pixelMap);
}

方法二：同步获取

takeScreenshotSync() {
  try {
    const uiContext = this.getUIContext();
    const pixelMap = uiContext.getComponentSnapshot()
      .getSync('targetComponent', {
        scale: 0.8,
        waitUntilRenderFinished: true
      });
    
    this.handleScreenshotResult(pixelMap);
  } catch (error) {
    console.error('同步截图失败:', error);
  }
}

3. 显示截图结果

// 在build方法中显示截图
build() {
  Column() {
    // 原始内容
    Column() {
      // ...原有内容
    }
    .id('targetComponent')
    
    // 截图结果显示
    Image(this.screenshotImage)
      .width(200)
      .height(200)
      .margin(10)
      .visibility(this.screenshotImage ? Visibility.Visible : Visibility.None)
    
    // 截图按钮
    Button('截图')
      .onClick(() => this.takeScreenshot())
      .margin(10)
  }
}

4. 完整示例代码

import { image } from '@kit.ImageKit';

@Entry
@Component
struct ScreenshotExample {
  @State screenshotImage: image.PixelMap | undefined = undefined;

  // 异步截图方法
  async takeScreenshot() {
    try {
      const uiContext = this.getUIContext();
      const pixelMap = await uiContext.getComponentSnapshot()
        .get('contentToCapture', {
          scale: 1.0,
          waitUntilRenderFinished: true
        });
      
      this.screenshotImage = pixelMap;
    } catch (error) {
      console.error('截图失败:', error);
    }
  }

  build() {
    Column({ space: 20 }) {
      // 目标截图区域
      Column() {
        Text('欢迎使用组件截图功能')
          .fontSize(24)
          .fontColor(Color.Blue)
        
        Text('这是可以截图的内容区域')
          .fontSize(16)
          .margin({ top: 10 })
        
        Image($r('app.media.logo'))
          .width(120)
          .height(120)
          .margin({ top: 20 })
      }
      .id('contentToCapture')
      .padding(20)
      .border({ width: 2, color: Color.Gray })

      // 截图结果显示
      if (this.screenshotImage) {
        Image(this.screenshotImage)
          .width(300)
          .height(200)
          .border({ width: 1, color: Color.Black })
      }

      // 操作按钮
      Button('截图')
        .width(120)
        .onClick(() => this.takeScreenshot())
    }
    .width('100%')
    .padding(20)
  }
}

5. SnapshotOptions 重要参数说明

配置选项：

• scale: number - 缩放比例（0.1-1.0），默认1.0
• waitUntilRenderFinished: boolean - 是否等待渲染完成（推荐设为true）
• region: Object - 指定截图区域
  • start: number - 起始x坐标
  • top: number - 起始y坐标
  • end: number - 结束x坐标
  • bottom: number - 结束y坐标

以往文章

• 我的iMaHarmonyOS 知识库接入 鸿蒙6 API20 新特性了

  mp.weixin.qq.com/s/YsbFQyi5P…

• 鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总

  mp.weixin.qq.com/s/ERmgSAIT8…

• 可可图片编辑 HarmonyOS（4）图片裁剪-canvas

  mp.weixin.qq.com/s/2M3f_LNnt…

• 可可图片编辑 HarmonyOS（3）应用间分享图片

  mp.weixin.qq.com/s/n8kkdougB…

可可图片编辑 HarmonyOS（5）滤镜效果 前言 可可图片编辑也实现了滤镜效果，主要是利用 Image组件的 colorFilter 属性实现。 滤镜的关键属性 colorFilter color

鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总表 2025华为鸿蒙创新赛相信大家都已经成功上架自己的作品了吧，根据比赛的要求，最少要接入3个鸿蒙6特性的Kit哈。 那么如何接入呢：

可可图片编辑 HarmonyOS（4）图片裁剪-canvas

前言

可可图片编辑 实现了图片的裁剪功能，效果如图所示。这里的核心技术是使用了canvas。

Canvas 入门

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等，canvas也可以实现对图片到裁剪，并且还可以把canvas上描绘的图形下载保存成图片。本章节主要讲解下canvas的基本使用。

基本使用

canvas 的基本使用分为 4 步：

1. 设置是否抗锯齿抗锯齿（Anti - aliasing）是一种在数字图形处理中使用的技术，主要用于减少图像中因为像素有限而产生的锯齿状边缘的现象
2. 创建画布上下文
3. 渲染画布组件
4. 在画布上描绘图案

@Entry
@Component
struct Index {
  // 1 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  // 2 用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
      // 3 在canvas中调用CanvasRenderingContext2D对象。
    Column(){
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          // 4 可以在这里绘制内容。
          this.context.strokeRect(50, 50, 200, 150);
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

5. 效果

canvas 常见用法

canvas 的核心思想是将想要的图形如，直线、圆圈、矩形等图形描绘到画布上。如果想要呈现出比较酷炫的效果，做法是：

1. 描绘图形
2. 擦除画布
3. 计算数值-重新描绘图形
4. 擦除画布
5. 。。。

通过以上过程实现动画效果

canvas 的坐标系

在 canvas 中画图形都是基于坐标系来进行的。 左上角为起点。

描绘图形

canvas 中内置的常见的描绘图形的方法有以下：

1. 直线
2. 矩形
3. 弧形
4. 文本
5. 图像
6. ...

直线

描绘直线可以使用：

1. 定起点 moveTo
2. 定终点 lineTo
3. 开始描绘 stroke

this.context.moveTo(10, 10);
this.context.lineTo(100, 100);
this.context.stroke();

矩形

可以使用直线lineTo自己画成一个矩形。也可以直接使用 strokeRect直接生成矩形

lineTo 画矩形

this.context.moveTo(10, 10);
this.context.lineTo(300, 10);
this.context.lineTo(300, 300);
this.context.lineTo(10, 300);
//   自动闭环
this.context.closePath();
//   开始描述 将路径的当前点移回到路径的起点，当前点到起点间画一条直线
this.context.stroke();

strokeRect 画矩形

// this.context.strokeRect(x, y, 宽度, 高度);
this.context.strokeRect(50, 50, 200, 150);

弧形

弧形可以使用 arc 和 arcTo 来描绘

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean)

参数名	类型	必填	说明
x	number	是	弧线圆心的 x 坐标值。默认单位：vp。
y	number	是	弧线圆心的 y 坐标值。默认单位：vp。
radius	number	是	弧线的圆半径。默认单位：vp。
startAngle	number	是	弧线的起始弧度。单位：弧度
endAngle	number	是	弧线的终止弧度。单位：弧度
counterclockwise	boolean	否	是否逆时针绘制圆弧。true:逆时针方向绘制椭圆。false:顺时针方向绘制椭圆。默认值：false。

这里需要注意的是 arc 使用的单位是弧度不是角度

一圈 = 360角度 =  2 * Math.PI
半圈 = 180角度 =  Math.PI ≈ 3.14

观察以下效果

100,75 是圆心坐标

50 是半径

0 是开始的弧度

6.28 ≈ 2 * Math.PI = 一圈

---

arc 是从正右方向开始旋转的。

this.context.beginPath();
this.context.arc(100, 75, 50, 0, 3.14 / 2);
this.context.stroke();

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)

参数名	类型	必填	说明
x1	number	是	第一个控制点的 x 坐标值。默认单位：vp。
y1	number	是	第一个控制点的 y 坐标值。默认单位：vp。
x2	number	是	第二个控制点的 x 坐标值。默认单位：vp。
y2	number	是	第二个控制点的 y 坐标值。默认单位：vp。
radius	number	是	圆弧的圆半径值。默认单位：vp。

this.context.beginPath();
this.context.strokeStyle = "#000000";
this.context.lineWidth = 3;
this.context.moveTo(360, 20);
this.context.arcTo(360, 170, 110, 170, 150);
this.context.stroke();

辅助理解

想象一下，我们有一个起点（即当前路径的最后一个点），然后有三个更多的点：两个控制点 (x1, y1) 和 (x2, y2)，以及由 radius

定义的一个圆心。arcTo 会创建一条从起点到第二个控制点 (x2, y2) 的圆弧，这条圆弧是位于以 radius 为半径的圆周上的一部

分。该圆弧会在起点和第一个控制点 (x1, y1) 之间形成一个切线，并且也会在第二个控制点 (x2, y2) 和圆弧的终点之间形成一个切线。

文本

1. strokeText表示描边的图形
2. fillText 表示填充的图形，还有其他fill，fillRect等也表示填充。

strokeText

  this.context.font = '55px sans-serif'
  this.context.strokeText("Hello World!", 20, 60)

fillText

this.context.font = '55px sans-serif'
this.context.fillText("Hello World!", 20, 60)

图像

drawImage可以把图像描绘到画布上，很多的在线图形合成效果都可以利用该功能实现

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void

drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void

参数名	类型	必填	说明
image	ImageBitmap或PixelMap	是	图片资源，请参考 ImageBitmap 或 PixelMap。
sx	number	是	裁切源图像时距离源图像左上角的 x 坐标值。image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。
sy	number	是	裁切源图像时距离源图像左上角的 y 坐标值。image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。
sw	number	是	裁切源图像时需要裁切的宽度。image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。
sh	number	是	裁切源图像时需要裁切的高度。image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。
dx	number	是	绘制区域左上角在 x 轴的位置。默认单位：vp。
dy	number	是	绘制区域左上角在 y 轴的位置。默认单位：vp。
dw	number	是	绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。默认单位：vp。
dh	number	是	绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。默认单位：vp。

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("/images/example.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.drawImage(this.img, 0, 0)
          this.context.drawImage(this.img, 0, 150, 300, 100)
          this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

canvas 浅尝动态效果 1

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() => {
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 浅尝动态效果 2

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() => {
  // 清理画布
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 属性 一览

名称	说明
fillStyle	设置绘制的填充色，支持多种类型及对应创建方式，有默认值。
lineWidth	设置绘制线条的宽度，有默认值及取值限制。
strokeStyle	设置线条的颜色，支持多种类型及对应创建方式，有默认值。
lineCap	指定线端点的样式，有可选值及默认值。
lineJoin	指定线段间相交的交点样式，有可选值及默认值。
miterLimit	设置斜接面限制值，有默认值及取值限制。
font	设置文本绘制中的字体样式，包含多种可选参数及默认值。
textAlign	设置文本绘制中的文本对齐方式，有可选值及默认值。
textBaseline	设置文本绘制中的水平对齐方式，有可选值及默认值。
globalAlpha	设置透明度，有默认值。
lineDashOffset	设置画布的虚线偏移量，有默认值。
globalCompositeOperation	设置合成操作的方式，有可选值及默认值。
shadowBlur	设置绘制阴影时的模糊级别，有默认值及取值限制。
shadowColor	设置绘制阴影时的阴影颜色，有默认值。
shadowOffsetX	设置绘制阴影时和原有对象的水平偏移值，有默认值。
shadowOffsetY	设置绘制阴影时和原有对象的垂直偏移值，有默认值。
imageSmoothingEnabled	设置绘制图片时是否进行图像平滑度调整，有默认值。
height	表示组件高度，有默认单位。
width	表示组件宽度，有默认单位。
imageSmoothingQuality	设置图像平滑度，有默认值。
direction	设置绘制文字时使用的文字方向，有默认值。
filter	设置图像的滤镜，支持多种滤镜效果，有默认值。
canvas	获取和 CanvasRenderingContext2D 关联的 Canvas 组件的 FrameNode 实例， 可监听可见状态，默认值为 null。

canvas 方法 一览

名称	说明
fillRect	推测用于进行图形填充相关操作（通常是填充矩形区域）
strokeRect	推测用于绘制矩形边框相关操作（通常是绘制矩形的轮廓）
clearRect	推测用于清除指定矩形区域的内容
fillText	推测用于对文本进行填充操作（比如设置文本填充颜色等相关样式填充）
strokeText	推测用于绘制文本的轮廓相关操作
measureText	推测用于测量文本相关的尺寸等属性
stroke	一般用于绘制图形的轮廓、线条等（按常规语义理解）
beginPath	通常用于开始定义一个新的路径，后续可基于此路径进行图形绘制等操作
moveTo	常用来将画笔移动到指定坐标位置，作为绘制路径的起始点等操作
lineTo	一般用于从当前画笔位置绘制直线到指定坐标位置，构建路径内容
closePath	通常用于闭合当前正在绘制的路径，使路径形成封闭图形
createPattern	可能用于创建某种图案（比如重复平铺的图案等）用于绘制等
bezierCurveTo	大概率用于绘制贝塞尔曲线，通过控制点来定义曲线形状
quadraticCurveTo	推测用于绘制二次贝塞尔曲线，指定控制点来确定曲线走向
arc	一般用于绘制圆弧，通过圆心、半径、起始角度、结束角度等参数来定义
arcTo	常用来绘制与两条切线相切的圆弧，按给定条件确定圆弧形状
ellipse	用于绘制椭圆图形，需指定相关参数如圆心坐标、长半轴、短半轴等
rect	可用于绘制矩形，指定矩形的左上角坐标、宽度、高度等参数
fill	用于对已绘制的图形或者指定区域进行填充操作
clip	可能用于设置裁剪区域，后续绘制内容只在裁剪区域内显示
reset12+	从名称看可能是在特定版本（12+）中用于重置某些状态或设置的操作
saveLayer12+	在特定版本（12+）里可能用于保存图层相关状态等操作
restoreLayer12+	在特定版本（12+）里对应于之前保存图层状态进行恢复的操作
resetTransform	推测用于重置图形变换相关的设置（比如旋转、缩放等变换）
rotate	用于将图形进行旋转操作，需指定旋转角度等参数
scale	用于对图形进行缩放操作，指定横向和纵向的缩放比例
transform	一般用于对图形进行多种变换（如平移、旋转、缩放等组合变换）的设置
setTransform	可能用于设置图形的变换矩阵，来确定图形的变换情况
getTransform	推测用于获取当前图形的变换相关信息（比如变换矩阵等）
translate	用于将图形进行平移操作，指定在横、纵坐标方向平移的距离
drawImage	通常用于在画布上绘制图像，指定图像源及绘制位置等参数
createImageData	可能用于创建图像数据对象（比如像素数据等相关内容）
getPixelMap	推测用于获取像素映射相关的数据（比如图像像素的分布等情况）
setPixelMap	大概是用于设置像素映射相关数据，改变图像像素表现等
getImageData	一般用于获取图像的像素数据等具体信息内容
putImageData	通常是将获取到的图像数据（如像素数据）重新应用到画布等位置
setLineDash	可能用于设置线条的虚线样式，指定虚线的长度、间隔等参数
getLineDash	推测用于获取当前线条所设置的虚线样式相关参数
transferFromImageBitmap	从名称看可能是与从图像位图进行数据转移相关操作
toDataURL	通常用于将画布等内容转换为可以表示图像数据的 URL 格式
restore	一般用于恢复之前保存的某些状态（如画布状态等）
save	常用来保存当前画布等相关的状态，以便后续恢复使用
createLinearGradient	用于创建线性渐变对象，可用于图形的渐变填充等操作
createRadialGradient	用于创建径向渐变对象，定义从中心向外扩散的渐变效果
createConicGradient	用于创建圆锥渐变对象，实现类似圆锥形状的渐变效果

以往文章

• 可可图片编辑 HarmonyOS 上架应用分享
• 可可图片编辑 HarmonyOS（2） 选择图片和保存到图库
• 可可图片编辑 HarmonyOS（3） 应用间分享图片
• 懂你的HarmonyOS知识库更新了，已经来到10970个文档了
• AI编程神器！Trae+Claude4.0 简单配置 让 HarmonyOS 开发效率飙升