如何无损压缩图片尺寸？React Native CLI+Node.js实现及尺寸获取

一、不损失视觉质量压缩图片尺寸的实用思路 #

• 优先用WebP格式：相同视觉效果下，WebP体积比JPG/PNG小50%左右，React Native全平台支持，建议把图片转成WebP格式。
• 先调分辨率再微调质量：先把图片分辨率降到实际显示需要的大小（比如手机端最长边不超过1080），再把质量参数设为0.8-0.95，这样既控体积又保画质。
• 用原生API压缩：依赖React Native社区的图片处理库，底层调用iOS的ImageIO和Android的BitmapFactory，比纯JS压缩效率高、效果好。

二、接收imageUri的图片压缩函数实现 #

先安装依赖：

npm install @react-native-community/image-manipulator
# 或者用yarn
yarn add @react-native-community/image-manipulator

然后实现压缩函数：

import ImageManipulator from '@react-native-community/image-manipulator';

/**
 * 压缩图片（保画质）
 * @param {string} imageUri - 待压缩图片的本地或远程URI
 * @returns {Promise<Object>} 返回压缩后的图片信息：uri、width、height
 */
const compressImage = async (imageUri) => {
  try {
    // 先获取原图尺寸，避免过度压缩
    const original = await ImageManipulator.manipulateAsync(
      imageUri,
      [],
      { format: 'webp', quality: 1 } // 先获取原图信息，质量设1不压缩
    );

    // 限制最长边为1080，可根据需求调整
    const maxSide = 1080;
    let targetWidth = original.width;
    let targetHeight = original.height;

    if (targetWidth > maxSide || targetHeight > maxSide) {
      const scaleRatio = Math.min(maxSide / targetWidth, maxSide / targetHeight);
      targetWidth = Math.round(targetWidth * scaleRatio);
      targetHeight = Math.round(targetHeight * scaleRatio);
    }

    // 执行尺寸调整+压缩，WebP格式+0.9质量基本看不出损失
    const compressed = await ImageManipulator.manipulateAsync(
      imageUri,
      [{ resize: { width: targetWidth, height: targetHeight } }],
      { format: 'webp', quality: 0.9 }
    );

    return compressed;
  } catch (err) {
    console.error('图片压缩出错:', err);
    throw err;
  }
};

如果需要JPG格式，把format改成'jpeg'即可，质量参数可根据需求在0.8-0.95之间调整。

三、获取指定样式的图片实际显示尺寸 #

你的图片样式：

image: {width: '130%', aspectRatio: 1, height: 600}

要获取实际显示尺寸，得结合父容器宽度计算，因为130%是相对父容器的：

实现代码 #

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

const GetImageSize = () => {
  const parentContainerRef = useRef(null);
  const [actualSize, setActualSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const calculateSize = () => {
      if (!parentContainerRef.current) return;

      // 获取父容器的实际宽度
      parentContainerRef.current.measure((_, __, parentWidth) => {
        // 按130%宽度计算的理论宽高（aspectRatio=1，宽高相等）
        const theoreticalSize = parentWidth * 1.3;
        // 实际尺寸取理论值和固定height=600的较小值，同时保持宽高比1:1
        const finalSize = Math.min(theoreticalSize, 600);
        
        setActualSize({ width: finalSize, height: finalSize });
      });
    };

    calculateSize();
  }, []);

  return (
    <View ref={parentContainerRef} style={{ flex: 1, padding: 10 }}>
      <Image
        style={{ width: '130%', aspectRatio: 1, height: 600 }}
        source={{ uri: 'https://example.com/your-image.jpg' }}
      />
      <Text>实际显示尺寸：宽{Math.round(actualSize.width)}，高{Math.round(actualSize.height)}</Text>
    </View>
  );
};

export default GetImageSize;

逻辑说明 #

React Native的布局规则中，当同时设置width百分比、aspectRatio和固定height时，会优先满足宽高比和尺寸上限：

1. 先按width:130%算出理论宽度，再用aspectRatio:1得到理论高度
2. 对比理论高度和固定height:600，取较小值作为最终高度
3. 因为宽高比是1，最终宽度和高度相等

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