React Native中如何获取高清图片的原始分辨率？

1. Image.resolveAssetSource处理网络图片URL返回null #

Image.resolveAssetSource仅适用于解析本地资源图片（通过require()引入的图片），无法处理网络图片URL，因此调用它处理网络链接会返回null。

如果需要获取网络图片的尺寸信息，使用Image.getSize()或Image.getSizeWithHeaders()方法：

import { Image } from 'react-native';

Image.getSize('https://your-image-url.com/image.jpg', (width, height) => {
  console.log('网络图片原始尺寸:', { width, height });
}, (error) => {
  console.error('获取尺寸失败:', error);
});

2. onLoad事件获取到压缩后的图片尺寸 #

React Native为优化性能，会自动压缩高分辨率图片，导致onLoad事件中event.nativeEvent.source返回的是压缩后的尺寸。要获取原始尺寸，分场景处理：

本地资源图片 #

直接使用Image.resolveAssetSource读取图片原始像素尺寸，不受RN压缩机制影响：

const asset = Image.resolveAssetSource(require('./assets/DJI_20230607123846_0002_SUPR.jpg'));
console.log('本地图片原始尺寸:', { width: asset.width, height: asset.height });

网络图片 #

使用Image.getSize()方法直接从图片文件元数据中读取原始尺寸，该方法不会受RN内存压缩的影响：

Image.getSize('https://your-image-url.com/high-res.jpg', (width, height) => {
  console.log('网络图片原始尺寸:', { width, height });
}, (error) => {
  console.error('获取尺寸失败:', error);
});

修改示例代码获取原始尺寸 #

针对你提供的本地图片示例，修改代码以获取原始尺寸：

import React, { useState, useEffect } from 'react';
import { View, Image, Text } from 'react-native';

export default function App() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  
  useEffect(() => {
    const asset = Image.resolveAssetSource(require('./assets/DJI_20230607123846_0002_SUPR.jpg'));
    setDimensions({ width: asset.width, height: asset.height });
    console.log('原始图片尺寸:', { width: asset.width, height: asset.height });
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={require('./assets/DJI_20230607123846_0002_SUPR.jpg')}
        style={{ width: 200, height: 200 }}
      />
      <Text>原始图片尺寸: {dimensions.width} x {dimensions.height}</Text>
    </View>
  );
}

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