RN 图像处理（裁剪、压缩、滤镜）性能很差怎么办？

@[toc]

在 React Native 项目里，只要碰到“图片处理”四个字，十有八九跑不掉一句话：卡。尤其是裁剪、压缩、批量处理大图的时候，JS 线程基本“当场升天”，UI 直接卡住不动。

为什么 React Native 在图片处理上这么吃力？原因其实很简单：图像处理本质上是计算密集型任务，而 JS 线程天生不适合干这种“搬砖”活。

这篇文章我会从原理讲起，再一步步带你写一个能跑的原生图片压缩模块（含 Android + iOS），同时聊聊 JSI、FastImage、大图策略等实战经验。

一、为什么图片处理必须走原生？

图片处理涉及几个特点：

1. 需要大量 CPU 运算
   比如图片压缩、滤镜、像素矩阵操作，这些都需要不断遍历像素，JS 做不了。

2. JS 线程要留给 UI
   JS 一卡，UI 就卡，用户体验直接崩。

3. React Native 的 Bridge 本身很慢
   JS ↔ 原生的通信是 JSON 序列化/反序列化，数据越大就越慢。

大图动不动就 3MB、5MB，甚至十几兆，发送一次就能让 RN 痛不欲生。

所以原则很明确：

图片处理不要用 JS，全部交给 Native。

二、JSI：彻底绕开 Bridge 的终极方案

React Native 新架构之后，最推荐的方式是用 JSI 写 C++ 的图片处理逻辑。

JSI 的好处是什么？

• 不走 Bridge
• 不序列化大数据
• 执行在原生线程
• 调用速度接近原生

非常适合图像处理这种重任务。

如果项目允许迁移新架构，图像处理优先用 JSI。当然如果你只是要压缩图片、裁剪这些功能，那传统 NativeModule 也完全够用。

接下来我们用 NativeModule 写一个基础的“图片压缩模块”，你可以按需求扩展滤镜、裁剪等能力。

三、为什么不要盲目用 JS 库处理图片？

常见库：

• react-native-image-editor（依赖原生，有限）
• react-native-image-resizer（可以但老旧）
• react-native-compressor（封装不错，但有些场景不够灵活）

如果项目对性能要求高（比如 IM、短视频、电商多图上传），最好自己写。

原因：

1. 你可以选择最优压缩算法（JPEG/WEBP/HEIC）
2. 你可以跟业务结合（上传前批量压缩）
3. 性能好得多（避免重复 decode/encode）

四、实战 Demo：用原生实现图片压缩模块

下面我们写一个可以直接跑的原生模块：

• Android：Kotlin + BitmapFactory
• iOS：Swift + UIImage JPEG 压缩
• JS：Promise 化封装 + 调用示例

文件结构

/android /ios src/native/NativeImageCompressor.ts src/ImageCompressor.ts

五、Android 原生压缩实现（Kotlin）

创建文件：android/app/src/main/java/com/yourapp/ImageCompressorModule.kt

packagecom.yourappimportandroid.graphics.BitmapFactoryimportandroid.graphics.Bitmapimportandroid.util.Base64importcom.facebook.react.bridge.*importjava.io.ByteArrayOutputStreamclassImageCompressorModule(reactContext:ReactApplicationContext):ReactContextBaseJavaModule(reactContext){overridefungetName():String{return"ImageCompressor"}@ReactMethodfuncompress(path:String,quality:Int,promise:Promise){try{valbitmap=BitmapFactory.decodeFile(path)valbaos=ByteArrayOutputStream()bitmap.compress(Bitmap.CompressFormat.JPEG,quality,baos)valbase64=Base64.encodeToString(baos.toByteArray(),Base64.DEFAULT)promise.resolve(base64)}catch(e:Exception){promise.reject("COMPRESS_ERROR",e)}}}

然后注册模块（ImageCompressorPackage.kt）：

classImageCompressorPackage:ReactPackage{overridefuncreateNativeModules(reactContext:ReactApplicationContext)=listOf(ImageCompressorModule(reactContext))overridefuncreateViewManagers(reactContext:ReactApplicationContext)=emptyList<ViewManager<*,*>>()}

在MainApplication.java加入：

packages.add(newImageCompressorPackage());

六、iOS 原生压缩实现（Swift）

文件：ios/ImageCompressor.swift

@objc(ImageCompressor)classImageCompressor:NSObject{@objc(compress:quality:resolve:reject:)funccompress(path:String,quality:NSNumber,resolve:RCTPromiseResolveBlock,reject:RCTPromiseRejectBlock){guardletimage=UIImage(contentsOfFile:path)else{reject("IMAGE_ERROR","Cannot load image",nil)return}guardletdata=image.jpegData(compressionQuality:CGFloat(truncating:quality)/100)else{reject("COMPRESS_ERROR","JPEG encode failed",nil)return}letbase64=data.base64EncodedString()resolve(base64)}}

注册模块（ImageCompressor.m）：

#import<React/RCTBridgeModule.h>@interfaceRCT_EXTERN_MODULE(ImageCompressor,NSObject)RCT_EXTERN_METHOD(compress:(NSString*)path quality:(nonnull NSNumber*)quality resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)@end

七、JS 层封装（Promise 化）

创建src/native/NativeImageCompressor.ts：

import{NativeModules}from'react-native';const{ImageCompressor}=NativeModules;exportdefault{compress:(path:string,quality:number=80):Promise<string>=>{returnImageCompressor.compress(path,quality);},};

再封装一层业务 API（可加超时、可加批量处理）：

importNativeImageCompressorfrom'./native/NativeImageCompressor';exportasyncfunctioncompressImage(path:string){constbase64=awaitNativeImageCompressor.compress(path,80);return`data:image/jpeg;base64,${base64}`;}

JS 代码完全不会被阻塞，压缩在原生线程进行。

八、react-native-fast-image 的原理解析

FastImage 解决的是“图片显示卡顿”，不是“处理性能问题”。

它为什么更快？

1. 使用 Fresco / Glide（Android）、SDWebImage（iOS）
2. 原生层并行加载图片
3. 有内存缓存和磁盘缓存策略
4. 避免 React Native Image 的多次解码

适用场景：

• 列表大量图（电商、资讯）
• 高速滑动
• 需要缓存策略

不适用：

• 压缩、裁剪、滤镜（这些需要自己做）

九、大图处理策略（非常重要）

如果你处理用户上传图片（电商、IM、社交），下面这些经验直接帮你省很多坑。

1.先压缩宽高，再压缩质量

流程：

decode → scale to maxWidth → jpeg compress

比直接 JPEG 压缩效率高得多。

2.移动端图片建议不超过 2~3MB

太大会上传失败。

3.不要一次处理多张图

建议：

• 批量压缩时串行压缩
• 每张压缩后释放 bitmap

4.避免在 UI 交互期间处理大图

比如拍照后立即压缩，要放到后台线程执行并给用户 loading。

十、如何把图像处理迁移到 JSI（进阶）

大图处理（如逐像素滤镜），用 Java/Kotlin 或 Swift 其实也够，但如果你想做到极致：

• C++ 实现算法
• 直接 Buffer ↔ JS TypedArray
• 不走 Bridge
• 性能提升至少 5~10 倍

JSI 的典型用途：

• 滤镜（黑白、模糊、锐化）
• 像素处理（亮度、饱和度）
• 视频帧预处理
• 多图批量处理

十一、调试三方图像库的技巧

1. Android 打开 Bitmap decode 日志

   adb shell setprop log.tag.BitmapFactory VERBOSE

2. iOS 查看内存峰值
   Xcode → Debug → Memory Graph

3. 监控压缩耗时
   JS + Native 双端打点

4. 对比不同压缩格式

   • JPG：通用、兼容好
   • WEBP：尺寸小、Android 强
   • HEIC：最省空间（iOS）

十二、总结

React Native 做图片处理时，你要记住一件事：

JS 只负责业务流程，所有计算密集逻辑必须走原生。

最推荐的处理方式：

1. 简单压缩 → 原生模块（Kotlin/Swift）
2. 复杂像素运算 → JSI（C++）
3. 显示优化 → FastImage
4. 多图上传 → 串行压缩 + 大图限制

整套方案下来，基本能把“图片导致卡顿”这个问题彻底根治。