Instagram喜欢使用React Native的过滤器

Question

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

干杯

Answer 1

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

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

编辑：很长一段时间之后，但gl-react正是为了完成像Instagram过滤图片等高级效果的目的。

Answer 2

我在https://medium.com/@wcandillon/instagram-filter-63e169a54ce3的媒体故事中使用gl-react编写了用于在React Native中实现instagram样式过滤器的食谱。

Answer 3

您可以检查我的react-native-image-filter-kit模块。它包含一个从CSSGram项目移植而来的Instagram，像set of filters。

用法示例：

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} />