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 - 如何获取相机卷缩略图而不是全尺寸图像

回答

相关问题