如何在React Native中直接获取图片Bitmap以实现客户端图像处理？

由于React Native本身没有直接暴露Bitmap（Android）或UIImage（iOS）的JS API，要实现你的图像处理需求（局部模糊、RGB噪点），你有两种主流方案：使用成熟的第三方库快速上手，或者自定义原生模块完全掌控底层操作。下面详细说明：

一、使用第三方库（无需编写原生代码） #

如果不想折腾原生开发，推荐用维护活跃、功能强大的库来间接操作底层图像对象：

1. React Native Skia #

这是Shopify维护的高性能2D图形库，支持直接访问像素数据，也能和原生图像对象交互，非常适合复杂图像处理：

• 加载图片后，你可以通过Image组件获取图像的像素缓冲区，进而模拟Bitmap的操作逻辑
• 示例：加载图片并获取像素数据

  import { Image, Canvas, useImage } from '@shopify/react-native-skia';
  
  const ImageProcessor = () => {
    const image = useImage(require('./your-image.png')); // 或远程URI
  
    if (image) {
      // 获取图像宽度、高度
      const width = image.width();
      const height = image.height();
      // 获取像素数据（Uint8Array，包含RGBA通道）
      const pixels = image.getPixels();
      
      // 这里可以对pixels进行处理：比如添加RGB噪点、局部模糊
      // 处理完后可以重新生成图像
    }
  
    return <Canvas style={{ flex: 1 }}>{image && <Image image={image} x={0} y={0} />}</Canvas>;
  };
  

• 对于局部模糊，Skia内置了模糊滤镜，直接调用即可；添加RGB噪点则可以遍历像素数组随机修改RGB值。

2. React Native Image Manipulator #

这个库（社区或Expo版本）封装了原生的图像处理能力，虽然不直接暴露Bitmap，但可以通过它的API完成你需要的模糊、噪点等操作，底层其实就是用原生Bitmap/UIImage实现的：

• 示例：添加模糊效果

  import ImageManipulator from '@react-native-community/image-editor';
  
  const blurImage = async (imageUri) => {
    const result = await ImageManipulator.manipulate(
      imageUri,
      [{ blur: 10 }], // 模糊程度
      { format: 'png' }
    );
    return result.uri;
  };
  

• 如果需要自定义噪点效果，可能需要结合其他像素处理逻辑，但这个库能帮你快速完成基础的原生图像操作。

二、自定义原生模块（完全掌控Bitmap操作） #

如果需要完全自定义图像处理逻辑（比如复杂的局部模糊、特定算法的噪点），可以自己写原生模块，直接操作Bitmap/UIImage，然后暴露给JS端调用。

Android端步骤： #

1. 创建原生模块类（继承ReactContextBaseJavaModule）
2. 在模块中添加方法，接收图片URI，将其转换为Bitmap：

   @ReactMethod
   public void getBitmapFromUri(String uri, Promise promise) {
     try {
       // 将URI转换为Bitmap
       Bitmap bitmap = MediaStore.Images.Media.getBitmap(getReactApplicationContext().getContentResolver(), Uri.parse(uri));
       
       // 这里可以直接操作Bitmap：比如局部模糊（用RenderScript或BlurMaskFilter）、添加RGB噪点
       // 示例：添加简单RGB噪点
       for (int i = 0; i < bitmap.getWidth(); i++) {
         for (int j = 0; j < bitmap.getHeight(); j++) {
           int pixel = bitmap.getPixel(i, j);
           // 随机修改RGB值
           int r = (Color.red(pixel) + (int)(Math.random() * 50)) % 255;
           int g = (Color.green(pixel) + (int)(Math.random() * 50)) % 255;
           int b = (Color.blue(pixel) + (int)(Math.random() * 50)) % 255;
           bitmap.setPixel(i, j, Color.rgb(r, g, b));
         }
       }
       
       // 将Bitmap转换为Base64返回给JS端
       ByteArrayOutputStream stream = new ByteArrayOutputStream();
       bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
       byte[] byteArray = stream.toByteArray();
       String base64 = Base64.encodeToString(byteArray, Base64.DEFAULT);
       promise.resolve(base64);
     } catch (Exception e) {
       promise.reject("ERROR", e.getMessage());
     }
   }
   

3. 注册模块，在JS端调用这个方法获取处理后的图像。

iOS端步骤： #

1. 创建原生模块类（继承NSObject并实现RCTBridgeModule协议）
2. 添加方法接收图片URI，转换为UIImage：

   RCT_EXPORT_METHOD(getBitmapFromUri:(NSString *)uri resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
     NSURL *imageUrl = [NSURL URLWithString:uri];
     UIImage *image = [UIImage imageWithContentsOfURL:imageUrl];
     
     if (!image) {
       reject(@"ERROR", @"Failed to load image", nil);
       return;
     }
     
     // 操作UIImage：比如添加RGB噪点，或用Core Image做模糊
     // 示例：添加RGB噪点
     CGImageRef cgImage = image.CGImage;
     size_t width = CGImageGetWidth(cgImage);
     size_t height = CGImageGetHeight(cgImage);
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     unsigned char *rawData = (unsigned char*)calloc(height * width * 4, sizeof(unsigned char));
     NSUInteger bytesPerPixel = 4;
     NSUInteger bytesPerRow = bytesPerPixel * width;
     NSUInteger bitsPerComponent = 8;
     CGContextRef context = CGBitmapContextCreate(rawData, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
     CGColorSpaceRelease(colorSpace);
     CGContextDrawImage(context, CGRectMake(0, 0, width, height), cgImage);
     
     // 遍历像素添加噪点
     for (int y = 0; y < height; y++) {
       for (int x = 0; x < width; x++) {
         NSUInteger byteIndex = (bytesPerRow * y) + x * bytesPerPixel;
         // 随机修改RGB值
         rawData[byteIndex] = MIN(rawData[byteIndex] + arc4random_uniform(50), 255); // R
         rawData[byteIndex + 1] = MIN(rawData[byteIndex + 1] + arc4random_uniform(50), 255); // G
         rawData[byteIndex + 2] = MIN(rawData[byteIndex + 2] + arc4random_uniform(50), 255); // B
       }
     }
     
     CGImageRef newImage = CGBitmapContextCreateImage(context);
     CGContextRelease(context);
     UIImage *processedImage = [UIImage imageWithCGImage:newImage];
     CGImageRelease(newImage);
     
     // 转换为Base64返回
     NSData *imageData = UIImagePNGRepresentation(processedImage);
     NSString *base64String = [imageData base64EncodedStringWithOptions:0];
     resolve(base64String);
   }
   

3. 注册模块后，在JS端调用该方法获取处理后的图像Base64，再转换为URI显示。

三、注意事项 #

• 处理大图片时要注意内存泄漏，Android端记得及时recycle() Bitmap，iOS端注意CGImage的释放。
• 如果是远程图片，要先下载到本地再处理，避免网络延迟和权限问题。
• 局部模糊可以用原生的模糊滤镜（Android的RenderScript Blur，iOS的CIGaussianBlur）配合裁剪区域实现，比手动遍历像素效率更高。

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