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

【问题标题】：React Native Speed up converting image uri to base64React Native 加速将图像 uri 转换为 base64
【发布时间】：2017-11-13 07:53:33
【问题描述】：

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

我目前正在从相机胶卷中获取图像，为了将每个图像保存到云中，我将每个图像 uri 转换为 base64，然后使用 react-native-fetch-blob 库转换为 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);
    })
}

【问题讨论】：

为什么还需要base64？您应该可以进行设备读取-> blob。

标签： react-native base64 blob image-conversion

【解决方案1】：

我发现以下解决方案对加快流程非常有帮助。 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

【讨论】：

【解决方案2】：

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

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

【讨论】：