HarmonyOS鸿蒙Next开发者技术支持-图片压缩

鸿蒙图片压缩

1.1 问题说明

在鸿蒙应用开发中，当需要处理用户上传或从网络加载的图片时，经常会遇到以下场景问题：

• 场景一：应用卡顿，内存占用过高 用户选择或拍摄了一张高分辨率（如4000x3000像素，5MB以上）的图片，直接在Image组件中显示或进行预览时，应用出现明显的卡顿、页面渲染延迟，甚至导致应用无响应（ANR）或内存溢出（OOM）。
• 场景二：上传缓慢，用户体验差 应用需要将用户图片上传到服务器。由于原始图片体积过大（如3-5MB），在网络状况不佳（如移动网络）时，上传耗时过长，消耗用户大量流量，并可能导致上传失败。
• 场景三：本地存储空间压力大 应用需要将用户编辑后的图片保存到本地。如果未经压缩直接存储大量原始图片，会迅速占用用户设备的宝贵存储空间，影响用户对应用的评价。

1.2 解决思路

核心思路是：在满足视觉质量要求的前提下，尽可能早地、在合适的环节对图片进行尺寸和质量的压缩。 整体逻辑框架如下：

1. 源控制：在图片输入源头（相机、相册选择器）即请求适当尺寸的图片。
2. 按需采样：根据图片最终显示控件的实际尺寸，对图片进行尺寸缩放（降采样），这是减少像素数据最有效的一步。
3. 有损压缩：在完成尺寸缩放后，对像素数据进行质量压缩（如JPEG编码），以减小文件体积。
4. 异步处理：所有压缩操作必须在异步线程（如TaskPool）中进行，绝不能阻塞UI线程。
5. 缓存策略：对压缩后的结果进行内存和磁盘缓存，避免重复计算。

1.3 解决方案

以下是一个结合了尺寸压缩和质量压缩的、可复用的鸿蒙（API 9+）图片压缩工具类ImageCompressor.ets实现方案。

// ImageCompressor.ets import { image } from ‘@kit.ImageKit’; import { fileIo } from ‘@kit.CoreFileKit’; import { BusinessError } from ‘@kit.BasicServicesKit’; import { taskpool } from ‘@kit.TaskPoolKit’;

/**

• 压缩配置选项 */ export class CompressOptions { maxWidth: number = 1024; // 目标最大宽度 maxHeight: number = 1024; // 目标最大高度 quality: number = 85; // 压缩质量 (0-100)，仅对JPEG有效 outputFormat: image.ImageFormat = image.ImageFormat.JPEG; // 输出格式 destPath?: string; // 指定输出路径，如果不指定则生成临时文件 }

/**

• 图片压缩工具类 / export class ImageCompressor { /*

  • 核心压缩方法（异步）
  • @param srcUri 源图片URI (例如：‘file://xxx.jpg’, ‘dataability://xxx’)
  • @param options 压缩配置
  • @returns 压缩后的图片URI (Promise<string>) */ public static async compress(srcUri: string, options?: CompressOptions): Promise<string> { const opt: CompressOptions = { …new CompressOptions(), …options };

  // 1. 创建ImageSource并获取原始图片信息 let imageSource: image.ImageSource = image.createImageSource(srcUri); try { const imageInfo: image.ImageInfo = await imageSource.getImageInfo(); console.info(原始图片信息： width=${imageInfo.size.width}, height=${imageInfo.size.height});

  // 2. 计算采样后的目标尺寸（保持宽高比） const targetSize: image.Size = this.calculateTargetSize(imageInfo.size, opt);

  // 3. 创建像素图，并进行尺寸解码（关键降采样步骤） const decodeOptions: image.DecodingOptions = { desiredSize: targetSize, // 指定期望解码的尺寸，系统会自动采样 desiredPixelFormat: image.PixelMapFormat.RGBA_8888, }; let pixelMap: image.PixelMap = await imageSource.createPixelMap(decodeOptions); imageSource.releaseSync(); // 及时释放ImageSource

  // 4. 如果指定了输出路径，准备输出；否则使用临时目录 let outputUri = opt.destPath; if (!outputUri) { const context = getContext(this) as common.UIAbilityContext; const tempDir = context.filesDir; const fileName = compressed_${Date.now()}.jpg; outputUri = ${tempDir}/${fileName}; }

  // 5. 配置编码选项并进行质量压缩 const imagePackerApi: image.ImagePacker = image.createImagePacker(); const packOpts: image.PackingOptions = { format: opt.outputFormat, quality: opt.quality, };

  // 6. 将PixelMap编码为压缩后的图片文件 const file: fileIo.File = await fileIo.open(outputUri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); await imagePackerApi.packing(pixelMap, packOpts, file.fd); file.closeSync(); pixelMap.releaseSync(); // 释放PixelMap内存

  console.info(图片压缩成功： ${srcUri} -> ${outputUri}); return outputUri;

  } catch (error) { const err: BusinessError = error as BusinessError; console.error(图片压缩失败，错误码：${err.code}, 信息：${err.message}); imageSource?.releaseSync(); throw new Error(Compression failed: ${err.message}); } }

/** * 在TaskPool中执行压缩（适用于大批量或后台任务） * @param srcUri 源图片URI * @param options 压缩配置 * @returns 返回一个可通过await获取结果的Promise */ public static async compressInTaskPool(srcUri: string, options?: CompressOptions): Promise<string> { const task: taskpool.Task = new taskpool.Task(this.compress, srcUri, options); return await taskpool.execute(task) as Promise<string>; }

/** * 计算目标尺寸（保持宽高比，不超过最大限制） * @param originalSize 原始尺寸 * @param opt 压缩选项 * @returns 计算后的目标尺寸 */ private static calculateTargetSize(originalSize: image.Size, opt: CompressOptions): image.Size { let { width: origWidth, height: origHeight } = originalSize; const { maxWidth, maxHeight } = opt;

 // 如果原始尺寸已经小于目标尺寸，则不放大
 if (origWidth <= maxWidth && origHeight <= maxHeight) {
   return { width: origWidth, height: origHeight };
 }

 // 计算缩放比例，以更接近max的那个边为准
 const widthRatio = maxWidth / origWidth;
 const heightRatio = maxHeight / origHeight;
 const ratio = Math.min(widthRatio, heightRatio);

 return {
   width: Math.round(origWidth * ratio),
   height: Math.round(origHeight * ratio)
 };

} }

使用示例：

// 在页面或ViewModel中使用 import { ImageCompressor, CompressOptions } from ‘…/utils/ImageCompressor’;

async onImageSelected(selectedUri: string) { // 示例1：基础压缩（异步函数内） try { const options = new CompressOptions(); options.maxWidth = 800; options.maxHeight = 600; options.quality = 80;

 const compressedUri = await ImageCompressor.compress(selectedUri, options);
 // 使用 compressedUri 显示或上传
 this.previewImageSrc = compressedUri;
 this.uploadImage(compressedUri);

} catch (error) { console.error(‘处理图片失败’, error); }

// 示例2：在TaskPool中执行（不阻塞当前异步函数） // ImageCompressor.compressInTaskPool(selectedUri, options).then(uri => { // // 处理结果 // }); }

1.4 结果展示

实施上述解决方案后，取得了显著的效果提升：

1. 内存效率提升：
   • 原图（4000x3000）内存占用：~48MB。
   • 压缩后（800x600）内存占用：800 * 600 * 4 ≈ 1.9MB。
   • 内存消耗降低超过95%。在图片列表或编辑页面中，同时处理多张图片也流畅自如。
2. 性能与用户体验优化：
   • UI流畅度：图片加载和显示的速度显著加快，彻底消除了因加载大图导致的界面卡顿。
   • 上传速度：一张5MB的原始图片压缩后可能仅为200-300KB，在4G网络下的上传时间从10秒以上缩短至2-3秒，上传效率提升70%以上。
   • 流量与存储节省：为用户和服务器节省了大量带宽与存储成本。