# 使用PixelMap完成图像变换

图片处理指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、[位图操作](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-pixelmap-operation)，本文介绍图像变换。

## 开发步骤

图像变换相关API的详细介绍请参见[Interface (PixelMap)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-image-pixelmap)。

1. 完成[图片解码](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-decoding)，获取PixelMap对象。

2. 获取图片信息。

   ```TypeScript
   // 获取图片大小。
   await this.pixelMap.getImageInfo().then((info: image.ImageInfo) => {
     this.imageInfo = info;
     Logger.info('Image width: ', info.size.width.toString());
     Logger.info('Image height: ', info.size.height.toString());
   }).catch((err: BusinessError) => {
     Logger.error('Failed to obtain the image pixel map information. The error is: ', String(err));
   });
   ```

3. 进行图像变换操作。

   原图：

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/da/v3/Csvfwj1xQzGtSy_K-rzoCA/zh-cn_image_0000002776749526.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=9E7856F49D0009E8360EFED2CB2A2D803DB1C15E00FBE8330178B040BA4BB58F)
   * 裁剪

     ```TypeScript
     const imageInfo = this.pixelMap.getImageInfoSync();
     const cropWidth = Math.min(400, imageInfo.size.width); // 原图宽度小于400时防止裁剪区域超出范围。
     const cropHeight = Math.min(400, imageInfo.size.height); // 原图高度小于400时防止裁剪区域超出范围。
     // x：裁剪起始点横坐标0。
     // y：裁剪起始点纵坐标0。
     // width：原图宽度不小于400时，裁剪宽度400，方向为从左到右（裁剪后的图片宽度为400）。
     // height：原图高度不小于400时，裁剪高度400，方向为从上往下（裁剪后的图片高度为400）。
     this.pixelMap.crop({ x: 0, y: 0, size: { width: cropWidth, height: cropHeight } }).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ae/v3/Nrc1TgDnQ_-LgGtvAmNP5w/zh-cn_image_0000002806029243.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=6F8A2A55D0E3D6A27B6D824D5061ABC869C82E8A1126A2D98E2956C77C8DCC50)
   * 缩放

     ```TypeScript
     // 宽为原来的0.5倍。
     // 高为原来的0.5倍。
     this.pixelMap.scale(0.5, 0.5).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/37/v3/qVrLIRhyTIyWzMlKmfZfMA/zh-cn_image_0000002806109133.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=8C63A838991C32AADD231496BBCFB4935A3503A8D5E54FFD42BDB7E07310F942)
   * 平移

     ```TypeScript
     // 向下平移100。
     // 向右平移100。
     this.pixelMap.translate(100, 100).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/71/v3/lstZnvCGRrWcEL-9stqRzQ/zh-cn_image_0000002776909514.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=C24DD48EF3DB604671B069918A89D36084F1F0B2F574169FA7118DB40594F107)
   * 旋转

     ```TypeScript
     // 顺时针旋转90°。
     this.pixelMap.rotate(90).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/39/v3/JHlR-NarRaSitsojYhVmIg/zh-cn_image_0000002776749528.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=2F4A0A1443166D44802ACEF47DEDFB1787661E7542703A45F9DAB5AF07107B0F)
   * 翻转

     ```TypeScript
     // 垂直翻转。
     this.pixelMap.flip(false, true).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/73/v3/BhSCNN6hRe-r6DPy7m4vCg/zh-cn_image_0000002806029245.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=C739B04087459265E1769E6CD5EF1EC8E2BADBB907F3DCAA84FCBB097C2A968D)

     ```TypeScript
     // 水平翻转。
     this.pixelMap.flip(true, false).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/48/v3/oMEbpQ4KT--P0coMjtajRg/zh-cn_image_0000002806109135.jpeg?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=80346BB811AA5D29F562129FFD12A047FA18D9D61014B9F30D0135E87E7CD3A5)
   * 透明度

     ```TypeScript
     // 将所有像素的透明度改为0.5。
     this.pixelMap.opacity(0.5).then(() => {
       // ...
     });
     ```

     ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5a/v3/Q0H2H7W4T6m9xiV6XX5CiA/zh-cn_image_0000002776909516.png?HW-CC-KV=V1&HW-CC-Date=20261029T054318Z&HW-CC-Expire=31536000000&HW-CC-Sign=1A3C381271E841E054EC5CDCFA93951B115B034CB5600ED5C753A27FD46581FB)

## 示例代码

* [拼图](https://gitcode.com/HarmonyOS_Samples/game-puzzle)