鸿蒙 图片处理：裁剪、缩放、旋转、翻转
本文同步发表于微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新
一、图像处理
图像处理指对PixelMap进行相关的操作，主要包括：
| 类型 | 说明 |
|---|---|
| 图像处理 | 裁剪、缩放、偏移、旋转、翻转、设置透明度等 |
| 位图操作 | 读写像素数据等 |
备注：本文介绍的是图像处理部分
开发前提
在进行图像变换操作前，需要先完成图片解码，获取PixelMap对象。
二、导入模块
import { image } from '@kit.ImageKit'; import { BusinessError } from '@kit.BasicServicesKit';三、获取图片信息
在图像变换操作前，可以先获取图片的基本信息。
// 获取图片大小 pixelMap.getImageInfo().then((info: image.ImageInfo) => { console.info('info.width = ' + info.size.width); console.info('info.height = ' + info.size.height); }).catch((err: BusinessError) => { console.error("Failed to obtain the image pixel map information. And the error is: " + err); });ImageInfo主要属性：
| 属性 | 说明 |
|---|---|
size.width | 图片宽度 |
size.height | 图片高度 |
isHdr | 是否为HDR图片 |
四、图像变换操作
4.1 裁剪（crop）
方法：pixelMap.crop(region: Region)
参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
x | number | 裁剪起始点横坐标 |
y | number | 裁剪起始点纵坐标 |
size.height | number | 裁剪高度（从上往下） |
size.width | number | 裁剪宽度（从左到右） |
示例：从(0,0)开始，裁剪400×400区域
// x：裁剪起始点横坐标0 // y：裁剪起始点纵坐标0 // height：裁剪高度400，方向为从上往下 // width：裁剪宽度400，方向为从左到右 pixelMap.crop({ x: 0, y: 0, size: { height: 400, width: 400 } });4.2 缩放（scale）
方法：pixelMap.scale(x: number, y: number)
参数说明：
| 参数 | 说明 |
|---|---|
x | 水平方向缩放比例（1为原大小，0.5为缩小一半，2为放大一倍） |
y | 垂直方向缩放比例 |
示例：缩小为原来的0.5倍
// 宽为原来的0.5 // 高为原来的0.5 pixelMap.scale(0.5, 0.5);4.3 偏移（translate）
方法：pixelMap.translate(x: number, y: number)
参数说明：
| 参数 | 说明 |
|---|---|
x | 水平方向偏移量（正数向右，负数向左） |
y | 垂直方向偏移量（正数向下，负数向上） |
示例：向右向下各偏移100像素
// 向下偏移100 // 向右偏移100 pixelMap.translate(100, 100);4.4 旋转（rotate）
方法：pixelMap.rotate(angle: number)
参数说明：
| 参数 | 说明 |
|---|---|
angle | 顺时针旋转角度（度数） |
示例：顺时针旋转90度
// 顺时针旋转90° pixelMap.rotate(90);4.5 翻转（flip）
方法：pixelMap.flip(horizontal: boolean, vertical: boolean)
参数说明：
| 参数 | 说明 |
|---|---|
horizontal | 是否水平翻转 |
vertical | 是否垂直翻转 |
示例：垂直翻转
// 垂直翻转 pixelMap.flip(false, true);示例：水平翻转
// 水平翻转 pixelMap.flip(true, false);4.6 设置透明度（opacity）
方法：pixelMap.opacity(alpha: number)
参数说明：
| 参数 | 说明 |
|---|---|
alpha | 透明度值，取值范围0-1（0完全透明，1完全不透明） |
示例：设置50%透明度
// 透明度0.5 pixelMap.opacity(0.5);五、注意事项
5.1 操作顺序
图像变换操作会依次生效，不同的顺序会产生不同的最终效果。
// 先裁剪后缩放 vs 先缩放后裁剪，结果不同 pixelMap.crop({ x: 0, y: 0, size: { width: 400, height: 400 } }); pixelMap.scale(0.5, 0.5);5.2 资源释放
图像变换操作完成后，建议释放不再使用的PixelMap资源。
pixelMap.release(); pixelMap = undefined;鸿蒙PixelMap图像变换支持裁剪(crop)、缩放(scale)、偏移(translate)、旋转(rotate)、翻转(flip)、透明度(opacity)等操作，通过对应方法即可完成图像的几何变换，操作前需先解码获取PixelMap。