1# 使用PixelMap完成位图操作 2 3当需要对目标图片中的部分区域进行处理时,可以使用位图操作功能。此功能常用于图片美化等操作。 4 5如下图所示,一张图片中,将指定的矩形区域像素数据读取出来,进行修改后,再写回原图片对应区域。 6 7**图1** 位图操作示意图 8 9 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.pixels中 42 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-->