1、概述

图片处理指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、位图操作。

鸿蒙媒体开发系列15——图片解码(PixcelMap)

2、图像变换

本文中讨论的原图如下：

👉🏻 获取图片信息

// 获取图片大小
pixelMap.getImageInfo().then( info => {
  console.info('info.width = ' + info.size.width);
  console.info('info.height = ' + info.size.height);
}).catch((err) => {
  console.error("Failed to obtain the image pixel map information.And the error is: " + err);
});

图片info信息结构如下：

👉🏻 裁剪图片

// x: 裁剪起始点横坐标0
// y: 裁剪起始点纵坐标0
// height: 裁剪高度400，方向为从上往下（裁剪后的图片高度为400）
// width: 裁剪宽度400，方向为从左到右（裁剪后的图片宽度为400）
pixelMap.crop({ x: 0, y: 0, size: { height: 400, width: 400 } });

crop()方法接受的入参数据结构定义如下：

原图裁剪后的图如下：

👉🏻  缩放

// 宽为原来的0.5
// 高为原来的0.5
pixelMap.scale(0.5, 0.5);

👉🏻 偏移

// 向下偏移100
// 向右偏移100
pixelMap.translate(100, 100);

👉🏻 旋转

// 顺时针旋转90°
pixelMap.rotate(90);

👉🏻 垂直翻转

// 垂直翻转
pixelMap.flip(false, true);

👉🏻 水平翻转

// 水平翻转 
pixelMap.flip(true, false);

👉🏻 设置透明度

// 透明度0.5 
pixelMap.opacity(0.5);

3、位图操作

当我们需要对目标图片中的部分区域进行处理时，可以使用位图操作功能。此功能常用于图片美化等场景。

如下图所示，一张图片中，将指定的矩形区域像素数据读取出来，进行修改后，再写回原图片对应区域。

读取并修改目标区域像素数据，并写回原图的代码如下：

// 获取图像像素的总字节数
let pixelBytesNumber = pixelMap.getPixelBytesNumber();
// 获取图像像素每行字节数
let rowCount = pixelMap.getBytesNumberPerRow();
// 获取当前图像像素密度。像素密度是指每英寸图片所拥有的像素数量。像素密度越大，图片越精细。
let getDensity = pixelMap.getDensity();

// 场景一：将读取的整张图像像素数据结果写入ArrayBuffer中
const readBuffer = new ArrayBuffer(pixelBytesNumber);
pixelMap.readPixelsToBuffer(readBuffer).then(() => {
  console.info('Succeeded in reading image pixel data.');
}).catch(error => {
  console.error('Failed to read image pixel data. And the error is: ' + error);
})

// 场景二：读取指定区域内的图片数据，结果写入area.pixels中
const area = {
  pixels: new ArrayBuffer(8),
  offset: 0,
  stride: 8,
  region: { size: { height: 1, width: 2 }, x: 0, y: 0 }
}
pixelMap.readPixels(area).then(() => {
  console.info('Succeeded in reading the image data in the area.');
}).catch(error => {
  console.error('Failed to read the image data in the area. And the error is: ' + error);
})

// 对于读取的图片数据，可以独立使用（创建新的pixelMap），也可以对area.pixels进行所需修改
// 将图片数据area.pixels写入指定区域内
pixelMap.writePixels(area).then(() => {
  console.info('Succeeded to write pixelMap into the specified area.');
})

// 将图片数据结果写入pixelMap中
const writeColor = new ArrayBuffer(96);
pixelMap.writeBufferToPixels(writeColor, () => {});