Instagram 喜欢使用 React Native 的过滤器答案

【问题标题】：Instagram like filters using React NativeInstagram 喜欢使用 React Native 的过滤器
【发布时间】：2021-09-30 14:30:56
【问题描述】：

我一直在寻找一种使用 React-Native 开发类似 Instagram 的过滤器的方法。我使用另一个名为 Ionic 的移动框架创建了过滤器，该框架使用 webview 创建应用程序，但是过滤器太慢了。我如何使用 react-native 操作图像来创建这样的过滤效果。

干杯

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您可以查看我的react-native-image-filter-kit 模块。它包含一个 Instagram 之类的 set of filters 移植自 CSSGram 项目。

使用示例：

import { Image } from 'react-native'
import { ToasterCompat } from 'react-native-image-filter-kit'

const imageStyle = { width: 320, height: 320 }

const atx = (
  <Image
    style={imageStyle}
    source={{ uri: 'https://una.im/CSSgram/img/atx.jpg' }}
    resizeMode={'contain'}
  />
)

const toasted = <ToasterCompat image={atx} />

【讨论】：

【解决方案2】：

我在medium story 中使用 gl-react 编写了用于在 React Native 中实现 instagram 样式过滤器的配方。

【讨论】：

它们是否也支持基于 init 的项目，或者它们仅用于博览会。 #your_u_tube_fan
对于没有 expo 的普通 React Native 项目，您只需将 gl-react-expo 切换为 github.com/gre/gl-react/tree/master/packages/gl-react-native。

【解决方案3】：

我认为您需要考虑实现 OpenGL 视图以获得良好的性能。如果您在设备上执行此操作，则可能应该使用 GLSL 着色器完成过滤器。我希望为 WebGL 找到一个 polyfill 类型的组件，但还没有找到。

react-canvas 项目非常有趣（尽管它是关于画布，而不是 webGL） - 并且可能值得探索。

编辑：已经很久了，但是 gl-react 正是为了对图像进行 Instagram 滤镜等高级效果。

【讨论】：

我们可以使用gl-react，但是没有办法用gl-react得到效果图。
是的，有@SukhdeepSinghKalra 你可以用 Surface.captureFrame() 得到它