如何将图像转换为灰度反应原生？

Question

有没有办法在原生反应中操作图像，因此它显示为灰度？我想尝试类似：filter: grayscale(1)

感谢。

Answer 1

处理之前删除的答案，可以通过拍摄图像，将另一张图像放在顶部绝对位置。

“后退”图片正在使用此https://facebook.github.io/react-native/docs/image.html定义的tintColor，这会将所有不透明的像素转换为该颜色。

“正面”图像添加了不透明度，使“背面”颜色向前移动，为您留下“灰度”图像

在：

<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：

Answer 2

您可以使用我的(Link Html Entities)库：

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