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

Question

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

我目前正在从相机胶卷中获取图像，为了将每张图像保存到云端，我将每张图像 uri 转换为 base64，然后使用 react-native-fetch-blob 库转换为 blob。虽然这是有效的，但我发现将每个图像转换为 base64 的过程需要很长时间。

相册中的示例图片：

什么是最 efficient/quickest 从相机胶卷中获取每个图像的图像 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);
    })
}

Answer 1

我会按照 react-native-fetch 文档中的示例进行操作。当他们为您处理时，您似乎正在尝试添加一个额外的步骤。

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

Answer 2

我发现下面的解决方案对加快这个过程非常有帮助。 base64 转换现在发生在本机端，而不是通过 JS。

React Native: Creating a custom module to upload camera roll images.

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

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

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

React Native Speed up converting image uri to base64

base64

blob

image-conversion

react-native