React Native 加速将图像 URI 转换为 base64

Question

我正在开发一个React Native iOS应用程序，在其中我想从用户的相机胶卷中获取某些图像并将它们保存在云存储中（目前我正在使用Firebase）。

目前，我正在从相机胶卷中获取图像，并为了将每个图像保存到云端，我正在使用react-native-fetch-blob库将每个图像URI转换为base64，然后转换为blob。虽然这种方法有效，但我发现每个图像转换为base64的过程非常耗时。

来自相机胶卷的一个示例图像： 最有效/最快的方法是什么，可以获取每个图像的URI，将其转换并存储到云存储中？ 我能否以更好的方式处理这个问题？ 使用Web Workers会加快base64转换过程吗？

我的当前图像转换过程：

import RNFetchBlob from 'react-native-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

function saveImages(images) {
    let blobs = await Promise.all(images.map(async asset => {
        let response = await convertImageToBlob(asset.node.image.uri);
        return response;
    }));

    // I will then send the array of blobs to Firebase storage
}


function convertImageToBlob(uri, mime = 'image/jpg') {
    const uploadUri = uri.replace('file://', '');

    return new Promise(async (resolve, reject) => {
        let data = await readStream(uploadUri);
        let blob = await Blob.build(data, { type: `${mime};BASE64` });
        resolve(blob);
    })
}

function readStream(uri) {
    return new Promise(async (resolve, reject) => {
        let response = await fs.readFile(uri, 'base64');
        resolve(response);
    })
}

- Onaracs

---

你为什么需要Base64呢？你应该能够直接从设备读取->blob。 - codeisforeva

Answer 1

我发现以下解决方案非常有帮助，可以加快处理速度。现在，Base64转换是在本地端而不是通过JS进行的。

值得注意的是，这将把图像转换为缩略图分辨率。

要将图像转换为全分辨率，请按照guillaumepiot在此处提供的解决方案操作： https://github.com/scottdixon/react-native-upload-from-camera-roll/issues/1

- Onaracs

Answer 2

我会遵循react-native-fetch文档中的示例。看起来你正在尝试添加一个额外的步骤，而实际上它们已经为你处理了这个步骤。

https://github.com/wkh237/react-native-fetch-blob#upload-a-file-from-storage

- codeisforeva