React native 如何在react native中将图像转换为灰度？

有没有办法在react native中操纵图像，使其显示为灰度？我想尝试以下操作：

filter:grayscale（1）

---

谢谢。

现在还不支持动态执行此操作。如果它是静态图像，您可以转换它，例如在Photoshop中。

处理以前删除的答案，这可以通过使用一个图像来实现，而另一个图像则绝对位于顶部

“后退”图像使用的是

tintColor

，如此处所定义，这将使所有不透明的像素变成该颜色

“正面”图像增加了一个不透明度，使“背面”颜色向前，留下一个“灰度”图像

之前：

<React.Fragment>
   <Image source={<something>} />
</React.Fragment>

之后（带有背景图像）：

“红色”

作为

tintColor

：

您可以使用我的库：

从'react native'导入{Image}；
从“反应本色矩阵图像过滤器”导入{Grayscale}；
常量灰度图像=（imageProps）=>(
);

我找不到一个react本机软件包，它只能转换为灰度级，所以我创建了一个，但我只为iOS创建了一个，抱歉。我将很快添加对android的支持

它与base64格式的输入/输出一起工作。但您可以像这样将base64传递给映像（请检查github上的示例）

让我知道这是否适用于您。

从“React”导入React，{useffect，useState}
import React, { useEffect, useState } from 'react'
import { Image } from 'react-native'
import Jimp from 'jimp/browser/lib/jimp'

function GrayscaleImage(props) {
  const [base64, setBase64] = useState()
  useEffect(() => {
    ;(async () => {
      const image = await Jimp.read(props.source.uri)
      image.grayscale()
      setBase64(await image.getBase64Async(image.getMIME()))
    })()
  }, [props])

  return base64 ? <Image {...props} source={{ uri: base64 }} /> : null
}

export default GrayscaleImage

从“react native”导入{Image}
从“Jimp/browser/lib/Jimp”导入Jimp
功能灰度图像（道具）{
const[base64，setBase64]=useState（）
useffect（（）=>{
；（异步（）=>{
const image=wait Jimp.read（props.source.uri）
image.grayscale（）
setBase64（等待image.getBase64Async（image.getMIME（））
})()
}[道具]）
返回base64？：空
}
导出默认灰度图像

Martin，在obj-c中有很多方法可以做到这一点，我有没有办法调用本机代码？是的，你可以从JS调用你的obj-c代码。这本指南有用吗？或者您可以实现一个版本的RCTImageView，它可以将图像转换为灰度：有什么新闻吗？这可能是一个很酷的组件。有更新吗？谢谢，看起来很棒！我们可以将其包含在Expo中吗？除非运行“eject”，否则不能将rncmif与Expo一起使用。我发现

CMIFColorMatrixImageFilter在
ios
@上找不到
，这是因为模块链接不正确，您必须将其从项目中删除，然后根据自述中的说明重新链接-嘿，我正在使用你的库，我遇到了一个问题：我有一个滑块控制图像中的对比度，它被包装在一个ColorMatrix组件中。我可以向上拖动滑块，图像中的对比度会升高，但当我向下拖动滑块时，即使实际的对比度值正在更改，图像对比度也不会更改。你知道我怎样才能解决这个问题吗？谢谢颜色非常好，这是一个很好的替代方案。我们甚至可以将两个图像标记合并到一个图像标记中。这对我有用。谢谢。这是一个很好的选择，可能在某些情况下就足够了，但它不能被视为将图像转换为灰度。虽然这可能会回答这个问题，但如果可能的话，你应该在答案中包含一个简短的解释，说明这个代码块是如何回答这个问题的。这有助于提供上下文，并使您的答案对未来的读者更有用。
import { Image } from 'react-native';
import { Grayscale } from 'react-native-color-matrix-image-filters';

const GrayscaledImage = (imageProps) => (
  <Grayscale>
    <Image {...imageProps} />
  </Grayscale>
);

  <Image
    ...
    source={{ uri: base64ImageString }}
  />

import React, { useEffect, useState } from 'react'
import { Image } from 'react-native'
import Jimp from 'jimp/browser/lib/jimp'

function GrayscaleImage(props) {
  const [base64, setBase64] = useState()
  useEffect(() => {
    ;(async () => {
      const image = await Jimp.read(props.source.uri)
      image.grayscale()
      setBase64(await image.getBase64Async(image.getMIME()))
    })()
  }, [props])

  return base64 ? <Image {...props} source={{ uri: base64 }} /> : null
}

export default GrayscaleImage