在React Native Expo项目中使用compressorjs遇到问题求助

安全阿岳

2026-9-29

问题根因

compressorjs 是面向浏览器环境开发的图片压缩库，内部依赖浏览器原生Canvas、FileReader等Web API实现压缩逻辑。React Native 运行环境没有实现上述浏览器专属API，所以即使你传入的Blob参数类型符合要求，也会触发运行异常，和你传入的参数类型无关。

适配Expo环境的实现方案

推荐使用Expo官方维护的expo-image-manipulator库实现图片压缩，无需额外原生配置，完全适配Expo运行环境，可完全替代compressorjs的能力。

第一步：安装依赖

运行命令安装库：
npx expo install expo-image-manipulator

第二步：改写代码逻辑

import * as ImageManipulator from 'expo-image-manipulator';

export const uploadPicture = async (uri, path) => {
    // 执行图片压缩，参数和你原有compressorjs配置对齐
    const compressedImage = await ImageManipulator.manipulateAsync(
        uri,
        [{ resize: { width: 512, height: 512 } }],
        {
            compress: 0.6,
            format: ImageManipulator.SaveFormat.JPEG
        }
    );

    // 将压缩后的图片URI转为Blob，用于后续Firebase上传
    const compressedBlob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
            resolve(xhr.response);
        };
        xhr.onerror = function (e) {
            console.log(e);
            reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", compressedImage.uri, true);
        xhr.send(null);
    });

    // 此处直接使用compressedBlob执行你原有的Firebase上传逻辑即可
    // ...

    compressedBlob.close();
}