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

Question

有没有办法在本机反应中操作图像，使其显示为灰度？我想尝试类似的东西：

filter: grayscale(1)

谢谢。

Answer 1

处理之前删除的答案，可以通过一张图像来实现，而另一张图像绝对位于顶部。

“背面”图像使用

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>

'red'

为

tintColor

:

Answer 2

您可以使用我的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>
);

Answer 3

我找不到一个能做到这一点的 React Native 包 - 转换为灰度 - 所以我创建了一个，但仅适用于 iOS，抱歉。我很快就会添加对 Android 的支持。

https://github.com/gabrielpoliciuc/react-native-grayscale

它适用于 Base64 格式输入/输出。但是你可以像这样将base64传递给Image（另请检查github上的示例）

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

让我知道这是否适合您。

Answer 4

尚不支持即时执行此操作。如果它是静态图像，您可以将其转换为例如在 Photoshop 中。

Answer 5

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