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

时间:2017-06-11 22:14:18

标签: react-native base64 blob image-conversion

我正在开发一个本机iOS应用程序,我想从用户的相机胶卷中获取某些图像并将它们保存在云存储中(此时我正在使用Firebase)。

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

相机胶卷中的示例图像: enter image description here

从相机胶卷中为每张图像拍摄图像的最有效/最快的方法是什么,将其转换并存储到云存储中。 有没有更好的方法来处理这个问题?使用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);
    })
}

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

我会按照react-native-fetch docs中的示例进行操作。看起来你正试图在他们为你照顾时添加一个额外的步骤。

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