当前位置:首页>鸿蒙APP>ArkTS 鸿蒙图片压缩+本地保存(无损压缩、相册写入、权限适配)

ArkTS 鸿蒙图片压缩+本地保存(无损压缩、相册写入、权限适配)

  • 2026-10-26 22:33:08
ArkTS 鸿蒙图片压缩+本地保存(无损压缩、相册写入、权限适配)

一、前言

在鸿蒙商业项目开发中,图片处理是必不可少的高频功能。

头像上传、朋友圈发布、拍照回传、图片分享,原生拍摄的原图体积巨大,一张照片往往占用5MB~15MB,直接上传会造成:上传速度慢、流量消耗高、服务器压力大。

而且鸿蒙新手极易踩坑:

  • 图片压缩后严重模糊、失真;

  • 保存到相册提示权限不足、写入失败;

  • 沙箱路径混乱,找不到保存后的图片;

  • 不同机型压缩比例不一致,适配翻车;

  • API升级后旧保存方式直接废弃。

今天给大家带来最简商用图片压缩+相册保存方案,纯原生API、无第三方插件,实现高清无损压缩、自定义压缩质量、本地沙箱保存、公共相册写入,代码直接复制运行。

二、最终实现效果

  1. ✅ 支持自定义压缩质量(10%~100%),高清无损压缩;

  2. ✅ 本地沙箱保存图片,可临时缓存、读取预览;

  3. ✅ 一键写入系统公共相册,无需复杂适配;

  4. ✅ 动态权限申请,兼容鸿蒙隐私权限规则;

  5. ✅ 获取图片大小、格式、分辨率,压缩前后对比;

  6. ✅ 适配API 10+、全系华为手机,无兼容报错。

三、核心实现思路

  1. 权限申请:动态申请图片读写权限,适配新版鸿蒙隐私管控;

  2. 图片解码:使用ImageSource读取原图,保留原始像素信息;

  3. 质量压缩:通过编码参数调整画质,不强行修改分辨率,实现无损压缩;

  4. 路径区分:分开处理应用沙箱路径、系统相册路径;

  5. 异常捕获:全覆盖异常捕获,避免压缩失败导致APP闪退。

四、完整可运行源码

4.1 module.json5 权限配置

写入相册必须配置读写媒体权限,API10+推荐使用媒体通用权限。

{  "module": {    "requestPermissions": [      {        "name": "ohos.permission.READ_MEDIA_IMAGES",        "reason": "读取本地图片",        "usedScene": {          "abilities": ["EntryAbility"],          "when": "inuse"        }      },      {        "name": "ohos.permission.WRITE_MEDIA_IMAGES",        "reason": "保存图片到相册",        "usedScene": {          "abilities": ["EntryAbility"],          "when": "inuse"        }      }    ]  }}

4.2 图片工具类 ImageUtil.ets(核心封装)

封装压缩、保存、获取图片大小方法,项目可直接复用。

import { image } from '@kit.ImageKit';import { fileIo, fs } from '@kit.FileKit';import { photoAccessHelper } from '@kit.MediaLibraryKit';import { common } from '@kit.BasicServicesKit';export class ImageUtil {  /**   * 图片质量压缩   * @param srcPath 原图路径   * @param quality 压缩质量 0-100   * @returns 压缩后沙箱路径   */  static async compressImage(srcPath: string, quality: number = 60): Promise<string> {    return new Promise(async (resolve, reject) => {      try {        // 1. 读取原图        const imageSource = image.createImageSource(srcPath);        // 2. 设置压缩编码参数        const packingOpt: image.PackingOption = {          format: image.ImageFormat.JPEG,          quality: quality        };        // 3. 创建应用沙箱保存路径        const time = new Date().getTime();        const destPath = `${getContext().filesDir}/${time}.jpg`;        // 4. 写入压缩后图片        await imageSource.packToFile(destPath, packingOpt);        // 5. 释放资源        imageSource.release();        resolve(destPath);      } catch (err) {        reject("压缩失败:" + JSON.stringify(err));      }    });  }  /**   * 保存图片到系统相册   * @param filePath 图片路径(沙箱路径)   */  static async saveImageToAlbum(filePath: string) {    try {      const context = getContext() as common.UIAbilityContext;      const helper = photoAccessHelper.getPhotoAccessHelper(context);      // 写入相册      await helper.createAsset(filePath);      return true;    } catch (e) {      console.error("保存相册失败:", e);      return false;    }  }  // 获取文件大小 KB  static async getFileSize(filePath: string): Promise<number> {    try {      const stat = await fs.stat(filePath);      return Math.floor(stat.size / 1024);    } catch (e) {      return 0;    }  }}

4.3 首页演示页面 Index.ets

包含:相册选图、压缩预览、保存相册、大小对比。

import { ImageUtil } from './utils/ImageUtil';import { picker } from '@kit.MediaLibraryKit';import { promptAction } from '@kit.ArkUI';@Entry@Componentstruct Index {  // 原图路径  @State srcImg: string = "";  // 压缩后路径  @State compressImg: string = "";  // 文件大小  @State srcSize: string = "0KB";  @State compressSize: string = "0KB";  // 打开相册选择图片  async selectImage() {    const result = await picker.selectPhotos({      MIMEType: picker.PhotoMIMEType.IMAGE_JPEG,      count: 1    });    if (result.photoUris.length > 0) {      this.srcImg = result.photoUris[0];      // 获取原图大小      const size = await ImageUtil.getFileSize(this.srcImg);      this.srcSize = size + "KB";    }  }  // 执行图片压缩  async doCompress() {    if (!this.srcImg) {      promptAction.showToast({ message: "请先选择图片" });      return;    }    // 压缩图片,质量60%    const savePath = await ImageUtil.compressImage(this.srcImg, 60);    this.compressImg = savePath;    // 获取压缩后大小    const size = await ImageUtil.getFileSize(savePath);    this.compressSize = size + "KB";    promptAction.showToast({ message: "压缩完成" });  }  // 保存到系统相册  async saveAlbum() {    if (!this.compressImg) {      promptAction.showToast({ message: "请先压缩图片" });      return;    }    const isSuccess = await ImageUtil.saveImageToAlbum(this.compressImg);    if (isSuccess) {      promptAction.showToast({ message: "保存相册成功" });    } else {      promptAction.showToast({ message: "保存失败" });    }  }  build() {    Column({ space: 20 }) {      Text("鸿蒙图片压缩+相册保存")        .fontSize(22)        .fontWeight(FontWeight.Bold)        .margin({ top: 30 })      // 图片展示区域      Row({ space: 10, justifyContent: FlexAlign.SpaceEvenly }) {        Column() {          Text("原图")            .fontSize(14)            .fontColor("#666")          Image(this.srcImg)            .width(140)            .height(180)            .backgroundColor("#f1f1f1")            .margin({ top: 6 })          Text("大小:" + this.srcSize)            .fontSize(12)            .margin({ top: 4 })        }        Column() {          Text("压缩后")            .fontSize(14)            .fontColor("#666")          Image(this.compressImg)            .width(140)            .height(180)            .backgroundColor("#f1f1f1")            .margin({ top: 6 })          Text("大小:" + this.compressSize)            .fontSize(12)            .margin({ top: 4 })        }      }      // 功能按钮      Button("1.选择相册图片")        .width("85%")        .onClick(() => this.selectImage())      Button("2.执行高清压缩")        .width("85%")        .backgroundColor("#2563EB")        .onClick(() => this.doCompress())      Button("3.保存到系统相册")        .width("85%")        .backgroundColor("#10B981")        .onClick(() => this.saveAlbum())    }    .width('100%')    .height('100%')    .padding(15)    .backgroundColor("#f7f8fa")  }}

五、关键API详细解析

5.1 ImageSource(图片解码源)

鸿蒙官方图片读取类,保留原始图片像素、格式、宽高信息,相比传统文件读取,解析速度更快、兼容性更强,是压缩图片的基础。

5.2 PackingOption(压缩配置)

  • format:压缩格式,推荐JPEG,兼容性最强;

  • quality:压缩质量,取值 0~100;

  • 日常项目推荐:50~70,体积减半且肉眼无失真。

5.3 沙箱文件路径

getContext().filesDir 属于应用私有沙箱目录,只能当前APP访问,适合临时存储压缩图片,卸载APP自动清除,无残留垃圾。

5.4 photoAccessHelper(相册写入)

API10+官方推荐相册操作类,替代废弃的媒体库写入接口,无需复杂公共目录适配,一行代码保存至系统相册。

六、避坑指南(生产必看)

6.1 压缩后图片模糊严重

原因:quality 设置过低;

建议:商业项目最低不要低于40,头像上传建议60~80,保证清晰度。

6.2 保存相册一直失败

检查两点:是否添加读写图片权限、是否使用沙箱路径写入;绝对不能直接写入自定义本地路径,新版鸿蒙严格管控隐私权限。

6.3 选图后图片不显示

相册返回的是媒体uri,Image组件原生支持uri渲染,无需二次转码;不要手动拼接路径,防止识别失败。

6.4 压缩大图片卡顿

图片压缩属于耗时IO操作,不要在主线程阻塞;高端项目建议使用 TaskPool 线程池异步压缩,避免页面卡顿。

6.5 压缩后图片旋转倒置

部分相机拍摄图片携带旋转角度,需要读取图片Exif信息矫正角度,本文基础版本默认自动适配手机常规拍摄图片。

七、项目扩展优化

7.1 异步线程压缩

大体积图片放入 TaskPool 子线程压缩,不阻塞UI,避免页面卡死、ANR异常。

7.2 图片宽高压缩

除质量压缩外,可搭配宽高缩放,超大图片强制限制分辨率,进一步缩小体积,适配后端上传限制。

7.3 图片缓存管理

沙箱压缩图片定时清理,避免APP长期占用存储空间,优化用户手机内存。

7.4 搭配上传功能

压缩后的沙箱图片,可直接通过http请求上传服务器,无需二次转码,适合头像、动态、评论图片上传业务。

八、总结

图片压缩、相册保存是鸿蒙开发必会通用基础功能,几乎所有商业APP都离不开。

本篇文章封装极简通用工具类,实现相册选图、高清压缩、体积对比、相册保存完整流程,原生API零依赖、适配新版鸿蒙隐私权限、无冗余代码。

代码可直接复制运行,无缝接入现有项目,轻松解决图片体积过大、上传缓慢、保存失败等常见问题。

关注本公众号,持续更新鸿蒙ArkTS实战教程,每一篇附带可运行完整源码,零基础也能循序渐进学会鸿蒙开发。

最新文章

随机文章