使用JSI-Image：在React Native中实现高效的图片处理🚀

---

工作进行中...

一个可写的内存中的Image JSI宿主对象。

JSI-Image是针对iOS和Android平台的现代库，它提供了一个快速的JavaScript接口来处理图像。通过这个库，你可以以三种方式创建JSI-Image实例：

1. 从文件加载
2. 从Web-URL加载
3. 由其他库（如VisionCamera's takePhoto(...)）返回

为什么选择JSI-Image？

传统的React Native图像处理效率低下。以相机应用为例，拍照流程通常包括：

1. 用户点击捕捉按钮。
2. 相机拍摄照片，库现在有一个内存中的UIImage实例。
3. 库在磁盘上创建新文件。（慢！）
4. 库将UIImage实例写入文件。（慢！）
5. 库返回文件路径给调用者（JavaScript）。
6. 应用导航到显示媒体的屏幕。
7. 应用将文件路径传递给<FastImage>组件。
8. <FastImage>组件必须从文件加载图像。（慢！）

但使用JSI-Image，可以跳过不必要的文件操作，因为图像可以在内存中传递。

1. 用户点击捕捉按钮。
2. 相机拍摄照片，库现在有一个内存中的UIImage实例。
3. 库直接返回内存中的Image实例给调用者。
4. 应用导航到显示媒体的屏幕。
5. 应用将内存中的Image实例传递给<FastImage>组件。
6. <FastImage>组件直接从内存显示UIImage实例。（快！）

性能基准测试

• 没有JSI-Image：

  [log] 成功拍照，耗时312毫秒！
  

• 有JSI-Image：

  [log] 成功拍照，耗时95毫秒！
  

JSI-Image使拍照速度提高了3倍多！

在更复杂的图像处理任务中，例如旋转、滤镜或缩放图像，这种改进会更加显著。

安装与使用

要安装JSI-Image，请执行以下命令：

yarn add react-native-jsi-image
cd ios && pod install

然后，你可以按照以下示例加载和使用图像：

从URL加载

import { loadImageFromUrl } from "react-native-jsi-image";

const image = await loadImageFromUrl('https://...');
console.log(`成功加载 ${image.width} x ${image.height} 图像！`);

从文件加载

import { loadImageFromFile } from "react-native-jsi-image";

const image = await loadImageFromFile('file:///Users/Marc/image.png');
console.log(`成功加载 ${image.width} x ${image.height} 图像！`);

检查并修改图像

const image = ...
const size = image.width * image.height
const realSize = size * image.scale
const orientation = image.orientation

for (const pixel of image.data) {
  console.log(`像素：${pixel}`);
}

// 旋转或翻转图像
if (image.orientation === "up") {
  // 在内存中旋转图像
  image.orientation = "right";
}

将修改后的图像保存至文件

let image = ...
image = rotateImageCorrectly(image)
await image.save('file:///tmp/temp-image.png') // 或 .jpg

为开发者设计

对于开发库来说，你的函数需要支持JSI函数。

接受Image参数

在JSI模块：

#include <JsiImage/ImageHostObject.h>

// ...

jsi::Value myFunction(jsi::Runtime& runtime,
                      jsi::Value& thisArg,
                      jsi::Value* arguments,
                      size_t count) {
  auto imageHostObject = arguments[0].asObject(runtime).asHostObject<ImageHostObject>(runtime);
  auto uiImage = imageHostObject->image;
  // 在这里使用uiImage
}

在TypeScript声明：

import { Image } from 'react-native-jsi-image'

export function myFunction(image: Image): void

从你的本机模块返回Image

在JSI模块：

#include <JsiImage/ImageHostObject.h>

// ...

jsi::Value myFunction(jsi::Runtime& runtime,
                      jsi::Value& thisArg,
                      jsi::Value* arguments,
                      size_t count) {
  UIImage* image = // ...

  auto instance = std::make_shared<ImageHostObject>(image, promiseVendor);
  return jsi::Object::createFromHostObject(runtime, instance);
}

在TypeScript声明：

import { Image } from 'react-native-jsi-image'

export function myFunction(): Image

贡献代码

查看贡献指南，了解如何参与仓库贡献和开发工作流。

许可证

JSI-Image遵循MIT许可证。

---

JSI-Image不仅仅是一个库，它是React Native图像处理的一场革命，让你的应用性能达到新的高度。通过减少磁盘操作，提升响应速度，它让你的应用能够更快地加载和处理图像，无论是用于摄像头应用还是任何形式的图像编辑和展示。立即尝试，让您的用户感受到前所未有的流畅体验吧！