我一直在寻找一种使用 React-Native 开发类似 Instagram 过滤器的方法。我使用另一个名为 Ionic 的移动框架创建了过滤器，该框架使用 webview 创建应用程序，但过滤器太慢了。我如何使用 react-native 操作图像以创建这种过滤效果。
干杯
Instagram 喜欢使用 React Native 的过滤器
IT技术
reactjs
react-native
2021-05-04 01:14:11
3个回答
你可以查看我的react-native-image-filter-kitmodule。它包含一组从 CSSGram 项目移植过来的类似 Instagram的过滤器。
用法示例：
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} />
我在媒体故事中使用 gl-react 编写了用于在 React Native 中实现 Instagram 样式过滤器的食谱。
我认为您需要考虑实施 OpenGl 视图以获得良好的性能。如果您在设备上执行此操作，则可能应该使用 GLSL 着色器来完成过滤器。我希望为 WebGL 找到一个 polyfill 类型的组件，但还没有找到。
该reactcanvas项目是相当有趣的（尽管它是关于canvas，不是WebGL的） -并可能是值得探讨的。
编辑：这是很长一段时间之后，但有gl-react正是为了在图像上做 Instagram 过滤器等高级效果。