React Native - 如何獲取相機捲縮略圖而不是全尺寸圖像

我想從我的測試設備相機卷獲取圖像以縮略圖形式呈現。我已成功從相機膠捲中提取圖像，並將它們顯示在列表視圖中的一系列圖像元素中，但它們需要很長時間才能加載。另外，我在React Native文檔中閱讀了圖像元素將選擇正確的圖像大小爲它將呈現的空間。React Native - 如何獲取相機捲縮略圖而不是全尺寸圖像

這是來自文檔。

iOS爲您的相機膠捲中的相同圖像保存了多種尺寸，因此出於性能原因選擇儘可能接近的尺寸非常重要。顯示200x200縮略圖時，您不希望將全質量3264x2448圖像用作來源。如果有完全匹配，則React Native會選擇它，否則它將使用第一個至少大50％以避免從縮小尺寸調整大小時產生模糊。所有這些都是默認完成的，因此您不必擔心編寫繁瑣（容易出錯）的代碼來自行完成。 https://facebook.github.io/react-native/docs/image.html#best-camera-roll-image

我用來讀取圖像的代碼非常簡單。

CameraRoll.getPhotos({ 
     first: 21, 
     assetType: 'Photos' 
    }, (data) => { 
     console.log(data); 
     var images = data.edges.map((asset) => { 
      return { 
       uri: asset.node.image.uri 
      }; 
     }); 

     this.setState({ 
      images: this.state.images.cloneWithRows(images) 
     }); 
    },() => { 
     this.setState({ 
      retrievePhotoError: messages.errors.retrievePhotos 
     }); 
    });

然後渲染它我有這些功能。

renderImage(image) { 
    return <Image resizeMode="cover" source={{uri: image.uri}} style={[{ 
     height: imageDimensions, // imageDimensions == 93.5 
     width: imageDimensions 
    }, componentStyles.thumbnails]}/>; 
}, 

render() { 
    <ListView 
     automaticallyAdjustContentInsets={false} 
     contentContainerStyle={componentStyles.row} 
     dataSource={this.state.images} 
     renderRow={this.renderImage} 
    /> 
}

我在這裏錯過了什麼？我要瘋了！！！

來源

2015-09-17 jasonmerino

您是否使用javascript解決方案？ –

OK，這是可能的，但你必須把你的手在反應本土的Objective-C的一方。

您可以檢查this。

你必須修改RCTCameraRollManager.m文件。在[assets addObject:@{...}]方法之後

} failureBlock:^(NSError *error) { 
    NSLog(@"that didn't work %@", error); 
}];

：

你必須要添加這些行：

ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init]; 

NSURL *url = [[NSURL alloc] initWithString:uri]; 

[library assetForURL:url resultBlock:^(ALAsset *asset) { 

    // Create an ALAssetRepresentation object using our asset 
    // and turn it into a bitmap using the CGImageRef opaque type. 
    CGImageRef imageRef = [asset thumbnail]; 
    CGSize dimensions = [UIImage imageWithCGImage:imageRef].size; 

    // Create UIImageJPEGRepresentation from CGImageRef 
    NSData *imageData = UIImageJPEGRepresentation([UIImage imageWithCGImage:imageRef], 0.1);

的[assets addObject:@{...}]方法之前和補充。

，您還可以在[assets addObject:@{方法中添加道具@"base64": base64Encoded。

檢查的鏈接，你有「新文件」，讓你的縮略圖（125×125大小）。

來源

2016-02-24 14:10:16

我也在努力尋找解決方案。顯然，react-native-image-resizer

解決這個問題。這是我如何使用它：

import ImageResizer from 'react-native-image-resizer'; 

async getPhotos(){ 
    await CameraRoll.getPhotos({ 
     first: 10 , 
     assetType: 'Photos' 
    }) 
    .then(r => { 
     this.setState({ photos:r.edges, endCursorPhotos:r.page_info.end_cursor }) 
     let resizePromiseArray = [] 
     for(let i=0; i<r.edges.length; i++){ 
      resizePromiseArray.push(ImageResizer.createResizedImage(r.edges[i].node.image.uri , 300, 500, 'JPEG', 100)) 
     } 
     return Promise.all(resizePromiseArray) 
    }) 
    .then(newUris=>{ 
     // console.log(JSON.stringify(this.state.photos,null,4)) 
     let newPhotos = this.state.photos.map((photo,i) => { 
      photo.node.image['optiUri'] = newUris[i] 
      return photo 
     }) 
     this.setState({ photos:newPhotos }) 
    }) 
    .catch(err =>{ 
     console.log(err) 
    }) 
}

我加入縮略圖圖像對象必須使用一個選項無論是作爲需要的話。
您只能調整一個圖像的大小。

這不是非常快，所以最好在componentDidMount上做。一個更好的方法是在模式中的這些照片中使用它，而父組件會在用戶訪問它們之前加載並保存照片到狀態

來源

2017-07-20 07:47:54 GulshanZealous

React Native - 如何獲取相機捲縮略圖而不是全尺寸圖像

回答

相關問題