如何在React Native中通过编程实现图片黑白滤镜，将彩色文字转为黑色？

通用编程方案（以Python PIL为例） #

针对白底彩色文字的图片，普通灰度化可能无法让文字变成纯黑，推荐用阈值处理实现精准转换：

• 先将图片转为灰度图
• 设置阈值，把灰度值高于阈值的像素（白底）保留为白色，低于阈值的像素（彩色文字）转为黑色

代码示例：

from PIL import Image

def convert_color_text_to_black(input_path, output_path, threshold=200):
    # 打开图片并转为灰度模式
    img = Image.open(input_path).convert("L")
    # 阈值处理：像素值大于阈值设为255（白），否则0（黑）
    processed_img = img.point(lambda x: 255 if x > threshold else 0)
    processed_img.save(output_path)

# 调用示例
convert_color_text_to_black("input_image.png", "output_image.png")

React Native中的实现方式 #

方法1：StyleSheet滤镜（快速灰度化） #

利用React Native内置的filter属性快速实现黑白效果，结合对比度调整能让文字更醒目：

import { Image, StyleSheet } from 'react-native';

const BlackWhiteTextImage = () => (
  <Image
    source={require('./assets/color-text-image.png')}
    style={styles.blackWhiteFilter}
  />
);

const styles = StyleSheet.create({
  blackWhiteFilter: {
    filter: 'grayscale(100%) contrast(200%)',
  },
});

export default BlackWhiteTextImage;

注意：这种方法是整体灰度化，彩色文字会转为深灰色，若需要纯黑文字，建议用方法2。

方法2：像素级阈值处理（精准转黑） #

使用@react-native-community/image-manipulator库进行像素级处理，实现文字纯黑转换：

1. 安装依赖：

npm install @react-native-community/image-manipulator

2. 代码实现：

import { Image, useState, useEffect } from 'react-native';
import { manipulateAsync } from '@react-native-community/image-manipulator';

const convertTextToBlack = async (imageUri) => {
  const result = await manipulateAsync(
    imageUri,
    [
      {
        filter: {
          process: (pixels) => {
            for (let i = 0; i < pixels.length; i += 4) {
              // 计算像素灰度值
              const gray = 0.299 * pixels[i] + 0.587 * pixels[i+1] + 0.114 * pixels[i+2];
              // 阈值处理：灰度>200设为白色，否则黑色
              const pixelValue = gray > 200 ? 255 : 0;
              pixels[i] = pixelValue;     // R通道
              pixels[i+1] = pixelValue;   // G通道
              pixels[i+2] = pixelValue;   // B通道
              // Alpha通道保持不变
            }
            return pixels;
          },
        },
      },
    ],
    { format: 'png' }
  );
  return result.uri;
};

const ProcessedTextImage = () => {
  const [processedUri, setProcessedUri] = useState(null);

  useEffect(() => {
    const processImage = async () => {
      const originalUri = require('./assets/color-text-image.png').uri;
      const uri = await convertTextToBlack(originalUri);
      setProcessedUri(uri);
    };
    processImage();
  }, []);

  return processedUri ? <Image source={{ uri: processedUri }} /> : null;
};

export default ProcessedTextImage;

内容的提问来源于stack exchange，提问作者Jinwook Kim