• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用PixelMap完成位图操作
2
3当需要对目标图片中的部分区域进行处理时,可以使用位图操作功能。此功能常用于图片美化等操作。
4
5如下图所示,一张图片中,将指定的矩形区域像素数据读取出来,进行修改后,再写回原图片对应区域。
6
7**图1** 位图操作示意图
8
9![Bitmap operation](figures/bitmap-operation.png)
10
11## 开发步骤
12
13位图操作相关API的详细介绍请参见[API参考](../../reference/apis-image-kit/js-apis-image.md#pixelmap7)。
14
151. 完成[图片解码](image-decoding.md),获取PixelMap位图对象。
16
172. 从PixelMap位图对象中获取信息。
18
19   ```ts
20   import { image } from '@kit.ImageKit';
21   // 获取图像像素的总字节数
22   let pixelBytesNumber : number = pixelMap.getPixelBytesNumber();
23   // 获取图像像素每行字节数
24   let rowCount : number = pixelMap.getBytesNumberPerRow();
25   // 获取当前图像像素密度。像素密度是指每英寸图片所拥有的像素数量。像素密度越大,图片越精细。
26   let getDensity : number = pixelMap.getDensity();
27   ```
28
293. 读取并修改目标区域像素数据,写回原图。
30
31   ```ts
32   import { BusinessError } from '@kit.BasicServicesKit';
33   // 场景一:将读取的整张图像像素数据结果写入ArrayBuffer中
34   const readBuffer = new ArrayBuffer(pixelBytesNumber);
35   pixelMap.readPixelsToBuffer(readBuffer).then(() => {
36     console.info('Succeeded in reading image pixel data.');
37   }).catch((error : BusinessError) => {
38     console.error('Failed to read image pixel data. And the error is: ' + error);
39   })
40
41   // 场景二:读取指定区域内的图片数据,结果写入area.pixels42   const area : image.PositionArea = {
43     pixels: new ArrayBuffer(8),
44     offset: 0,
45     stride: 8,
46     region: { size: { height: 1, width: 2 }, x: 0, y: 0 }
47   }
48   pixelMap.readPixels(area).then(() => {
49     console.info('Succeeded in reading the image data in the area.');
50   }).catch((error : BusinessError) => {
51     console.error('Failed to read the image data in the area. And the error is: ' + error);
52   })
53
54   // 对于读取的图片数据,可以独立使用(创建新的pixelMap),也可以对area.pixels进行所需修改
55   // 将图片数据area.pixels写入指定区域内
56   pixelMap.writePixels(area).then(() => {
57     console.info('Succeeded to write pixelMap into the specified area.');
58   })
59
60   // 将图片数据结果写入pixelMap中
61   const writeColor = new ArrayBuffer(96);
62   pixelMap.writeBufferToPixels(writeColor, () => {});
63   ```
64
65## 复制(深拷贝)新的PixelMap
66
671. 完成[图片解码](image-decoding.md),获取PixelMap位图对象。
68
692. 复制(深拷贝)一个新的PixelMap。
70   > **说明:** 若创建新 PixelMap 时指定的 srcPixelFormat 与被复制的 PixelMap 的像素格式不一致,则新 PixelMap 的图片色彩与被复制的 PixelMap 的图片色彩会不一致。
71
72     ```ts
73      /**
74       *  复制(深拷贝)一个新的PixelMap
75       *
76       * @param pixelMap - 被复制的PixelMap。
77       * @param desiredPixelFormat - 新PixelMap的像素格式。如果不指定,则仍使用原PixelMap的像素格式。
78       * @returns 新PixelMap。
79       **/
80      clonePixelMap(pixelMap: PixelMap, desiredPixelFormat?: image.PixelMapFormat): PixelMap {
81        // 获取当前PixelMap的图片信息。
82        const imageInfo = pixelMap.getImageInfoSync();
83        // 读取当前PixelMap的图像像素数据,并按照当前PixelMap的像素格式写入缓冲区数组。
84        const buffer = new ArrayBuffer(pixelMap.getPixelBytesNumber());
85        pixelMap.readPixelsToBufferSync(buffer);
86        // 根据当前PixelMap的图片信息,生成初始化选项。
87        const options: image.InitializationOptions = {
88          // 当前PixelMap的像素格式。
89          srcPixelFormat: imageInfo.pixelFormat,
90          // 新PixelMap的像素格式。
91          pixelFormat: desiredPixelFormat ?? imageInfo.pixelFormat,
92          // 当前PixelMap的尺寸大小。
93          size: imageInfo.size
94        };
95        // 根据初始化选项和缓冲区数组,生成新PixelMap。
96        return image.createPixelMapSync(buffer, options);
97      }
98     ```
99
100<!--RP1-->
101<!--RP1End-->