React Native中无需渲染组件调整图片亮度的可用库咨询
直接给你三个经过Expo项目实测可用的方案,都不需要挂载任何UI组件,处理完的图片可以直接传给expo-print使用:
优先选官方库
expo-image-manipulator
这是适配成本最低的方案,Expo官方维护,不需要额外原生配置,Expo Go、EAS构建包都能直接跑。底层是原生实现的图片处理,性能远高于纯JS方案,哪怕是拍照亭输出的千万像素级原图,处理速度也在几百毫秒级别。
库本身直接内置亮度调整参数,不需要自己写像素遍历逻辑,传入本地图片URI就能直接拿到处理后的图片URI,核心调用代码如下:import { manipulateAsync, SaveFormat } from 'expo-image-manipulator'; // brightness参数取值范围-1~1:0为原图,正数提亮,负数压暗 const adjustImageBrightness = async (originImageUri, brightness = 0.15) => { const result = await manipulateAsync( originImageUri, [{ brightness }], { format: SaveFormat.JPEG, compress: 0.95 } ); return result.uri; };除了亮度之外,这个库还自带裁剪、旋转、对比度、饱和度调整、翻转能力,足够覆盖拍照亭场景的基础图片处理需求。
需要类Jimp纯JS处理能力选适配RN的Jimp构建版
如果你需要更灵活的自定义滤镜逻辑,可以用适配React Native环境的Jimp纯JS裁剪版本,不依赖DOM、不依赖任何渲染组件,直接读取图片二进制数据做像素级处理,API逻辑和你熟悉的web版Jimp完全一致。
注意不要直接安装npm默认的jimp包,默认包依赖Node核心模块和浏览器DOM API,React Native环境无法直接运行,需要安装剔除了node、web依赖的纯JS定制构建版。这个方案的缺点是纯JS处理大尺寸图片速度偏慢,处理1200万像素的原图可能需要2-4秒等待时间,适合对出图速度要求不高的场景。需要更多滤镜效果选
react-native-image-filter-kit静态调用模式
多数人对这个库的印象是需要挂载渲染组件使用,但实际上它底层暴露了直接处理图片URI的静态方法,完全不需要挂载组件就能调用。除了基础亮度调整之外,还自带暗角、复古、胶片颗粒、黑白等几十种拍照亭常用的滤镜效果。缺点是这个库依赖原生模块,不能直接在Expo Go中运行,需要搭配Expo Dev Client使用。
避坑提示:不要用依赖Canvas、Image组件onLoad回调的web类图片处理库,这类库必须把图片元素挂载到渲染树、拿到绘制上下文后才能处理像素,不仅容易因为视图未渲染完成导致出图失败,处理大尺寸图片时还很容易造成UI卡顿。
内容的提问来源于stack exchange,提问作者JAWS

