1# 使用PixelMap完成图像变换
2
3图片处理指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、[位图操作](image-pixelmap-operation.md)，本文介绍图像变换。
4
5## 开发步骤
6
7图像变换相关API的详细介绍请参见[API参考](../../reference/apis-image-kit/js-apis-image.md#pixelmap7)。
8
91. 完成[图片解码](image-decoding.md)，获取PixelMap对象。
10
112. 获取图片信息。
12
13   ```ts
14   import { BusinessError } from '@kit.BasicServicesKit';
15   // 获取图片大小
16   pixelMap.getImageInfo().then( (info : image.ImageInfo) => {
17     console.info('info.width = ' + info.size.width);
18     console.info('info.height = ' + info.size.height);
19   }).catch((err : BusinessError) => {
20     console.error("Failed to obtain the image pixel map information.And the error is: " + err);
21   });
22   ```
23
243. 进行图像变换操作。
25
26   原图：
27
28     ![Original drawing](figures/original-drawing.jpeg)
29
30   - 裁剪
31
32     ```ts
33     // x：裁剪起始点横坐标0
34     // y：裁剪起始点纵坐标0
35     // height：裁剪高度400，方向为从上往下（裁剪后的图片高度为400）
36     // width：裁剪宽度400，方向为从左到右（裁剪后的图片宽度为400）
37     pixelMap.crop({x: 0, y: 0, size: { height: 400, width: 400 } });
38     ```
39
40     ![cropping](figures/cropping.jpeg)
41
42   - 缩放
43
44     ```ts
45     // 宽为原来的0.5
46     // 高为原来的0.5
47     pixelMap.scale(0.5, 0.5);
48     ```
49
50     ![zoom](figures/zoom.jpeg)
51
52   - 偏移
53
54     ```ts
55     // 向下偏移100
56     // 向右偏移100
57     pixelMap.translate(100, 100);
58     ```
59
60     ![offsets](figures/offsets.jpeg)
61
62   - 旋转
63
64     ```ts
65     // 顺时针旋转90°
66     pixelMap.rotate(90);
67     ```
68
69     ![rotate](figures/rotate.jpeg)
70
71   - 翻转
72
73     ```ts
74     // 垂直翻转
75     pixelMap.flip(false, true);
76     ```
77
78     ![Vertical Flip](figures/vertical-flip.jpeg)
79
80     ```ts
81     // 水平翻转
82     pixelMap.flip(true, false);
83     ```
84
85     ![Horizontal Flip](figures/horizontal-flip.jpeg)
86
87   - 透明度
88
89     ```ts
90     // 透明度0.5
91     pixelMap.opacity(0.5);
92     ```
93
94     ![Transparency](figures/transparency.png)
95
96<!--RP1-->
97<!--RP1End-->