可可图片编辑 HarmonyOS 上架应用分享

介绍

可可图片编辑 原名 图片编辑大师 ，因为上架审核的时候，提示与一些已有应用重名，为了避免冲突，需要改名字，所以苦心思考了一分钟，就调整成 可可图片编辑。

应用

应用商店访问链接

https://appgallery.huawei.com/app/detail?id=tupianbmjidashi.qinglanzhuma.huawei\&channelId=SHARE

功能展示

可可图片编辑提供了图片处理的六大核心功能

图片压缩
图片裁剪
滤镜效果
添加水印
图片绘画
图片拼图

其中比较有意思的是也实现了图片的分享功能，这个在开发的时候也是调试了一段时间。

开发和上架过程

这个APP的开发过程是可以说是有90%是AI完成的，确实也摸索出一些自己的心得，上架过程只被打回一次，后续再提交也就通过了，还是挺顺利。

开发时间

立项的初衷

抱着学习的心态来做产品，是最好验收自己掌握技能与否的方法，也是让自己所有的投入得到成就感的最好的方式。

之前就一直想着好好梳理下 HarmonyOS 中关于 Image 相关 Kit的一些用法，正好就借这个机会来实现了。

能看到，这个Image的kit还是可以做不少的功能到，都可以直接在鸿蒙手机上来完成了。

开发环境与技术栈

开发工具：DevEco Studio 5.0+
SDK版本：HarmonyOS SDK API 14+
开发语言：ArkTS
UI框架：ArkUI
路由管理：ZRouter 1.6.1
状态管理：V2状态管理(@ComponentV2 + @Local/@Param)

状态管理策略

项目全面采用HarmonyOS V2状态管理方案，相比V1版本具有更好的性能和更简洁的API：

typescript 复制代码

@Entry
@Route({ name: 'CompressionPage', useTemplate: true })
@ComponentV2
export struct CompressionPage {
  @Local selectedImage: ImageInfo | null = null;
  @Local compressionParams: CompressionParams = {
    quality: 80,
    scale: 1.0,
    format: ImageFormat.JPEG,
    type: CompressionType.QUALITY,
    mode: CompressionMode.MANUAL,
    keepAspectRatio: true
  };
  @Local compressionResult: CompressionResult | null = null;
  @Local operationState: OperationState = OperationState.IDLE;
}

智能图片压缩算法

图片压缩是应用的核心功能之一，我们实现了一套智能压缩算法，支持三种压缩模式：

压缩参数接口设计

typescript 复制代码

export interface CompressionParams {
  quality: number;              // 压缩质量 (0-100)
  scale: number;               // 缩放比例 (0.1-1.0)
  format: ImageFormat;         // 目标格式
  type: CompressionType;       // 压缩类型
  mode: CompressionMode;       // 压缩模式
  keepAspectRatio: boolean;    // 是否保持宽高比
  maxFileSize?: number;        // 最大文件大小 (KB)
  maxWidth?: number;           // 最大宽度
  maxHeight?: number;          // 最大高度
}

自适应压缩算法

针对按文件大小压缩的需求，我们实现了基于二分查找的自适应压缩算法：

typescript 复制代码

export async function compressImageBySize(
  imageUri: string, 
  params: CompressionParams
): Promise<CompressionResult> {
  const targetSize = (params.maxFileSize || 1024) * 1024; // 转换为字节
  
  // 二分查找最佳压缩参数
  let minQuality = 10;
  let maxQuality = params.quality;
  
  while (maxQuality - minQuality > 5) {
    const currentQuality = Math.floor((minQuality + maxQuality) / 2);
    
    // 尝试当前质量参数
    const compressedData = await compressWithQuality(imageUri, currentQuality);
    
    if (compressedData.byteLength <= targetSize) {
      minQuality = currentQuality;
    } else {
      maxQuality = currentQuality;
    }
  }
  
  return bestResult;
}

后续计划

后续继续分享这个应用的实现细节，敬请期待。

以往文章

近期活动

最近想要想要考取 HarmonyOS 基础或者高级证书，或者快要获取的同学都可以点击这个链接，加入我的班级，考取成功有机会获得鸿蒙礼盒一份。

联系我

可以加我微信，带你了解更多HarmonyOS相关的咨询。