प्रतिक्रिया मूल - पूर्ण आकार की छवियों के बजाय कैमरा रोल थंबनेल कैसे प्राप्त करें

Question

मैं थंबनेल के रूप में प्रस्तुत करने के लिए अपने परीक्षण डिवाइस कैमरा रोल से छवियां प्राप्त करने का प्रयास कर रहा हूं। मैंने कैमरे रोल से छवियों को सफलतापूर्वक लाया है और उन्हें सूची दृश्य में छवि तत्वों की एक श्रृंखला के भीतर प्रदर्शित किया है, लेकिन इन्हें लोड करने में काफी समय लगता है। साथ ही, मैंने प्रतिक्रिया मूल दस्तावेज़ों में पढ़ा है कि छवि तत्व चुनने वाला उस स्थान के लिए सही छवि आकार जो इसे प्रस्तुत करेगा।

यह दस्तावेज़ों से है।

आईओएस आपके कैमरा रोल में एक ही छवि के लिए कई आकार बचाता है, प्रदर्शन कारणों से जितना संभव हो उतना करीब चुनना बहुत महत्वपूर्ण है। 200x200 थंबनेल प्रदर्शित करते समय आप पूरी गुणवत्ता 3264x2448 छवि स्रोत के रूप में उपयोग नहीं करना चाहेंगे। यदि कोई सटीक मिलान है, तो प्रतिक्रिया मूल इसे चुन लेगा, अन्यथा यह पहले आकार का उपयोग करने जा रहा है जो निकटतम आकार से आकार बदलने पर धुंध से बचने के लिए कम से कम 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} 
    /> 
} 

मुझे यहां क्या याद आ रही है? मै पागल हो रहा हु!!!

Answer 1

ठीक है, यह संभव है लेकिन आपको अपने हाथों को प्रतिक्रिया-मूल के उद्देश्य-सी पार्टी में रखना होगा।

आप this देख सकते हैं।

आपको RCTCameraRollManager.m फ़ाइल को संशोधित करना होगा। [assets addObject:@{...}] विधि के बाद

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

: [assets addObject:@{...}] विधि से पहले

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:@{ विधि में प्रो @"base64": base64Encoded भी जोड़ सकते हैं।

लिंक की जांच करें, आपके पास "नई फ़ाइल" है जो आपको थंबनेल (125 x 125 आकार) देती है।

Answer 2

मैं भी समाधान खोजने के लिए संघर्ष कर रहा था। जाहिर है, 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) 
    }) 
} 

मैं छवि वस्तु के लिए थंबनेल जोड़ रहा उपयोग करने के लिए एक विकल्प है या तो होने की जरूरत के रूप में।
आप केवल एक छवि का आकार बदल सकते हैं।

यह अविश्वसनीय रूप से तेज़ नहीं है, इसलिए घटकडिडमाउंट पर ऐसा करना बेहतर है। मॉड्यूल में इन तस्वीरों में इसका उपयोग करने का एक बेहतर तरीका यह है कि मूल घटक लोड होने और उपयोगकर्ता को उन्हें एक्सेस करने से पहले फ़ोटो को सहेजने के लिए