鸿蒙5.0开辟进阶：图片压缩方案实现案例 - IT评测·应用市场-qidao123.com

async selectPhotoFromAlbum() {
// 创建图库选项实例
const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
// 设置选择的媒体文件类型为Image
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
// 设置选择媒体文件的最大数目
photoSelectOptions.maxSelectNumber = 1;
// 创建图库选择器实例
const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
// 调用photoViewPicker.select()接口拉起图库界面进行图片选择，图片选择成功后，返回photoSelectResult结果集。
photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
// select返回的uri权限是只读权限，需要将uri写入全局变量@State中即可进行读取文件数据操作。
this.uris = photoSelectResult.photoUris;
this.photoCount = this.uris.length;
if (this.photoCount > 0) {
const ALBUM_PATH: string = photoSelectResult.photoUris[0];
// 找到最后一个点（.）的索引位置
let lastDotIndex = ALBUM_PATH.lastIndexOf('.');
// 使用slice方法从最后一个点之后的位置开始截取字符串到末尾
this.beforeCompressFmt =
ALBUM_PATH.slice(lastDotIndex + 1) === 'jpg' ? 'jpeg' : ALBUM_PATH.slice(lastDotIndex + 1);
this.afterCompressFmt = this.beforeCompressFmt;
// 读取选择图片的buffer
const file = fs.openSync(ALBUM_PATH, fs.OpenMode.READ_ONLY);
// 获取选择图片的字节长度
this.beforeCompressByteLength = fs.statSync(file.fd).size;
fs.closeSync(file);
}
}).catch((err: BusinessError) => {
hilog.error(0x0000, TAG, `PhotoViewPicker.select failed :, error code: ${err.code}, message: ${err.message}.`);
})
}

复制代码

manualCompression() {
const ALBUM_PATH: string = this.uris[0];
const file = fs.openSync(ALBUM_PATH, fs.OpenMode.READ_ONLY);
let buffer = new ArrayBuffer(fs.statSync(file.fd).size);
fs.readSync(file.fd, buffer);
fs.closeSync(file);
const decodingOptions: image.DecodingOptions = { editable: true };
const imageSource: image.ImageSource = image.createImageSource(buffer);
imageSource.createPixelMap(decodingOptions).then(async (originalPixelMap: image.PixelMap) => {
// 使用scale对图片进行缩放。入参分别为图片宽高的缩放倍数
await originalPixelMap.scale(this.imageScaleVal / 100, this.imageScaleVal / 100);
// savePixelMap用于把压缩后的图片保存到图库时使用。由于保存图片时调用的packToFile内部会做类似packing的处理，所以这里只保存scale缩放尺寸后的PixelMap。
this.savePixelMap = originalPixelMap;
// packing压缩图片
let compressedImageData: ArrayBuffer =
await this.packing(originalPixelMap, this.imageQualityVal, this.afterCompressFmt);
// 压缩后的ArrayBuffer数据转PixelMap
let imageSource = image.createImageSource(compressedImageData);
let opts: image.DecodingOptions = { editable: true };
// showPixelMap用于显示压缩后的图片
this.showPixelMap = await imageSource.createPixelMap(opts);
// showCompressFormat用于显示压缩后的图片格式
this.showCompressFormat = this.afterCompressFmt;
// 显示估算packing压缩后的图片大小。该图片在内存中作为ArrayBuffer数据的压缩后大小，这一数值并不直接等同于该图片在最终保存到相册时的实际文件大小。
this.afterCompressionSize = (compressedImageData.byteLength / BYTE_CONVERSION).toFixed(1);
promptAction.showToast({ message: $r('app.string.image_compression_compress_completed') });
}).catch((err: BusinessError) => {
hilog.error(0x0000, TAG, `Failed to create PixelMap, error code: ${err.code}, message: ${err.message}.`);
});
}

复制代码

// 优先压缩图片质量
async qualityPriorityCompress(sourcePixelMap: image.PixelMap, maxCompressedImageSize: number) {
let compressedImageData: ArrayBuffer =
await this.packing(sourcePixelMap, IMAGE_QUALITY_ZERO, this.afterCompressFmt);
// 先判断图片质量参数设置最低0能否满足目标大小。如果能满足目标大小，则直接使用packing二分图片质量。如果不满足，则质量参数固定为0，进行scale尺寸压缩
if (compressedImageData.byteLength <= maxCompressedImageSize * BYTE_CONVERSION) {
// 满足目标大小，直接使用packing二分
await this.packingImage(sourcePixelMap, compressedImageData, maxCompressedImageSize * BYTE_CONVERSION);
} else {
// 不满足目标大小，质量参数设置为0，再进行scale尺寸压缩
await this.scalePriorityCompress(sourcePixelMap, maxCompressedImageSize, IMAGE_QUALITY_ZERO);
}
// 更新显示压缩后的图片格式
this.showCompressFormat = this.afterCompressFmt;
}
// packing二分方式循环压缩
async packingImage(sourcePixelMap: image.PixelMap, compressedImageData: ArrayBuffer, maxCompressedImageByte: number) {
let imageQuality: number = 0;
const DICHOTOMY_ACCURACY = this.minBisectUnit;
// 图片质量参数范围为0-100，这里以minBisectUnit为最小二分单位创建用于packing二分图片质量参数的数组。
const packingArray: number[] = [];
// 性能知识点: 如果对图片压缩质量要求不高，建议调高minBisectUnit（对应‘packing最小二分单位’），减少循环，提升packing压缩性能。
for (let i = 0; i <= 100; i += DICHOTOMY_ACCURACY) {
packingArray.push(i);
}
let left = 0; // 定义二分搜索范围的左边界
let right = packingArray.length - 1; // 定义二分搜索范围的右边界
const AFTER_COMPRESS_FMT = this.afterCompressFmt;
// 二分压缩图片
while (left <= right) {
const mid = Math.floor((left + right) / 2); // 定义二分搜索范围的中间位置
imageQuality = packingArray[mid]; // 获取二分中间位置的图片质量值
// 根据传入的图片质量参数进行packing压缩，返回压缩后的图片文件流数据。
compressedImageData = await this.packing(sourcePixelMap, imageQuality, AFTER_COMPRESS_FMT);
// 判断查找一个尽可能接近但不超过压缩目标的压缩大小
if (compressedImageData.byteLength <= maxCompressedImageByte) {
// 二分目标值在右半边，继续在更高的图片质量参数（即mid + 1）中搜索
left = mid + 1;
// 判断mid是否已经二分到最后，如果二分完了，退出
if (mid === packingArray.length - 1) {
break;
}
// 获取下一次二分的图片质量参数（mid+1）压缩的图片文件流数据
compressedImageData = await this.packing(sourcePixelMap, packingArray[mid + 1], AFTER_COMPRESS_FMT);
// 判断用下一次图片质量参数（mid+1）压缩的图片大小是否大于指定图片的压缩目标大小。如果大于，说明当前图片质量参数（mid）压缩出来的
// 图片大小最接近指定图片的压缩目标大小。传入当前图片质量参数mid，得到最终目标图片压缩数据。
if (compressedImageData.byteLength > maxCompressedImageByte) {
compressedImageData = await this.packing(sourcePixelMap, packingArray[mid], AFTER_COMPRESS_FMT);
break;
}
} else {
// 目标值不在当前范围的右半部分，将搜索范围的右边界向左移动，以缩小搜索范围并继续在下一次迭代中查找左半部分。
right = mid - 1;
}
}
// ...
}

复制代码

async saveImageToAlbum(): Promise<void> {
// 获取相册管理模块的实例
const HELPER = photoAccessHelper.getPhotoAccessHelper(this.context);
// 指定待创建的文件类型、后缀和创建选项，创建图片资源
const URI = await HELPER.createAsset(photoAccessHelper.PhotoType.IMAGE, this.afterCompressFmt);
let file = await fs.open(URI, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
let imagePacker = image.createImagePacker();
let packOpts: image.PackingOption = {
format: 'image/' + this.afterCompressFmt,
quality: this.isAutoMode ? this.autoModeQuality : this.imageQualityVal
};
// 指定打包参数，将PixelMap图片源编码后直接打包进文件
imagePacker.packToFile(this.savePixelMap, file.fd, packOpts, async (err: BusinessError) => {
if (err) {
hilog.error(0x0000, TAG, `Failed to pack the image to file, error code: ${err.code}, message: ${err.message}.`);
} else {
promptAction.showToast({ message: $r('app.string.image_compression_save_image_msg') });
}
// TODO 知识点：使用packToFile方法，需要调用imagePacker.release主动释放imagePacker，打开图库时才能看到新存入的图片
await fs.close(file.fd).finally(() => {
imagePacker.release();
})
})
}

复制代码

imagecompression // har类型
|---view
| |---ImageCompression.ets // 视图层-图片压缩页面
| |---HelpDescription.ets // 视图层-自定义帮助组件

复制代码