Question

问题

在React-Native（0.43）应用程序中，我们使用的是一个使用SectionList来渲染按天排序的照片的组件。每个部分可以包含多个图像。使用 react-native-image-crop-picker 库拍摄照片并上传到后端，如果没有可用的互联网连接，则在本地排队，以base64格式编码。图像分辨率设置为800x800像素（图像的其他用途要求）。在内存较低的手机上，由于内存不足，渲染约20张图像会导致应用程序崩溃。这个问题只能在低端Android手机上重现，但我希望这是一个低内存问题，与操作系统无关。要解决此问题，需要生成缩略图以测试是否是这种情况。与生成这些缩略图的时间无关（在发送到服务器之前或在加载组件之前即时）。下面的代码适用于iOS，但对于Android，它会抛出错误：未知协议：数据来自 ImageEditor.cropImage（）函数。

来自主.js文件的片段

    //The mergeReduxWithMeteor function takes care of merging the redux state, 
    //containing images not yet uploaded to the server, 
    //and the Meteor data as received by the server.
    //No issues here...

    helpers.mergeReduxWithMeteor(props.photoStore, props.SynergySummaryReady ? props.SynergyData : [])

        //The imageHelper.compressPhoto does the actual compression
        //No issues with the promise chain as is.

        .then((data) => {
            return Promise.all(data.map(imageHelper.compressPhoto))
        })

        // The remaining functions take care of the formatting for the SectionList.
        // No issues here either... :)

        .then((data) => {
            return helpers.clusterDataByDay(data)
        })

        //We populate the resulting data in the state that is used for the SectionList

        .then((data) => {
            this.setState({NotHorusData: data})
        })
        .catch((error) => console.error(error))

imageHelper.compressphoto（）

export function compressPhoto(photo) {
  return new Promise((resolve, reject) => {

let imageSize = {
  offset: {
    x: 0,
    y: 0
  },
  size: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE
  },
  displaySize: {
    width: IMAGE_TARGET_SIZE,
    height: IMAGE_TARGET_SIZE,
  },
  resizeMode: 'contain'
}


ImageEditor.cropImage(`data:image/jpeg;base64,${photo.data.userPhoto}`, imageSize, (imageURI) => {
     ImageStore.getBase64ForTag(imageURI, (base64Data) => {
       resolve({
         ...photo,
         data: {
           ...photo.data,
           userPhoto: base64Data,
         }
       })
   }, (error) => reject(error))
 }, (error) => reject(error))

  })
}

方法1：修复Android上的数据协议问题

来自RN的

Issue on Github解决了同样的问题，但未提供解决方案。

方法2：通过在Android上提供uri来绕过数据协议问题

虽然由于增加的通信/延迟而不太有利，但另一种方法是通过提供ImageStore提供的临时URI来避免数据协议问题。请参阅下面针对Android的改编代码。

if(Platform.OS === 'android'){
  ImageStore.addImageFromBase64(`data:image/jpeg;base64,${photo.data.userPhoto}`, (tempURI) => {
    ImageEditor.cropImage(tempURI, imageSize, (imageURI) => {
         ImageStore.getBase64ForTag(imageURI, (base64Data) => {
           ImageStore.removeImageForTag(tempURI)
           resolve({
             ...photo,
             data: {
               ...photo.data,
               userPhoto: base64Data,
             }
           })
       }, (error) => reject(error))
     }, (error) => reject(error))
  }, (error) => reject(error))  
}

不幸的是，在Android上无法识别 ImageStore.addImageFromBase64 。

有没有人对Android上的 ImageEditor 和 ImageStore 有任何经验，可能会对这种情况有所帮助？也欢迎任何其他方法！

Answer 1

我设法通过为iOS和Android使用 react-native-fetch-blob 和 react-native-image-resizer 解决了这个问题。与上述问题中的实现相比，性能出乎意料地好。我分享了下面的代码供其他人使用：）

export function compressPhoto(photo) {
return new Promise((resolve, reject) => {

    let tempUri = `${cache}/Vire_${photo.data.userPhotoDate}.jpg`

    fs.writeFile(tempUri, photo.data.userPhoto, "base64")
        .then(() => {
            ImageResizer.createResizedImage(
                `file:${tempUri}`, IMAGE_TARGET_SIZE, IMAGE_TARGET_SIZE, "JPEG", 100, 0).then((resizedImageUri) => {
                fs.readFile(`${resizedImageUri}`, "base64")
                    .then( data => {
                        resolve({...photo, data: { ...photo.data, userPhoto: data }})
                    })
                    .catch(error => reject(`readFile:error: ${error}`))
            },
            (error) => reject(`createResizedImage:error: ${error}`)
            )
        })
        .catch( error => {
            reject(`writeFile:error: ${error}`)
        })

     })
}

要点是将base64编码的图片存储在cache-directory中，并使用imageResizer获取图像，压缩图像，然后在base64中再次读取以供使用。

在Android上的React-Native中压缩base64编码图像无法识别“数据”协议

1 个答案: