如何在react native中将图像转换为灰度？
如何在react native中将图像转换为灰度？
提问于 2015-09-16 18:36:13
有没有一种方法可以在原生反应中操作图像，使其显示为灰度？我想试试这样的东西：filter: grayscale(1)
谢谢。
回答 5
Stack Overflow用户
发布于 2018-05-04 06:13:22
在处理之前删除的答案时，这可以通过拥有一张图像来实现，其中另一张图像绝对位于顶部。
"back“图像使用的是tintColor，正如这里定义的https://facebook.github.io/react-native/docs/image.html，这会将所有不透明的像素转换为该颜色。
“正面”图像增加了一个不透明度，使“背面”颜色向前移动，留下一个“灰度”图像。
之前：
<React.Fragment>
<Image source={<something>} />
</React.Fragment>
之后(带有背景图像)：
<React.Fragment>
<Image source={<something>} style={{ tintColor: 'gray' }} />
<Image source={<something>} style={{ position: 'absolute', opacity: 0.3}} />
</React.Fragment>
作为tintColor的'red'
Stack Overflow用户
发布于 2018-08-02 02:47:34
您可以使用我的react-native-color-matrix-image-filters库：
import { Image } from 'react-native';
import { Grayscale } from 'react-native-color-matrix-image-filters';
const GrayscaledImage = (imageProps) => (
<Grayscale>
<Image {...imageProps} />
</Grayscale>
);Stack Overflow用户
发布于 2020-03-20 15:54:15
我找不到一个react原生包来做这件事-转换成灰度-所以我创建了一个，但只为iOS知道，对不起。我很快就会添加对android的支持。
https://github.com/gabrielpoliciuc/react-native-grayscale
它适用于base64格式的输入/输出。但是你可以像这样将base64传递给图像(请查看github上的示例)
<Image
...
source={{ uri: base64ImageString }}
/>如果这对你有效，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32606221
复制相关文章
相似问题
腾讯云开发者
