How to get thumb image from Photolibrary image?

Question

Currently i am fetching memory issue because i am loading direct image in Flatlist of React Native. Issue is that due to high resolutions images memory limit reached and app get crashed on iPhone. Is there any way i can fetch direct thumb url like image url (e.g. url: 'assets-library://asset/asset.JPG?id=5BECA80C-33B3-46A0-AE44-CF28A838CECF&ext=JPG',) ?

Currently i am using 'React-native-photo-framework'.

Its native iOS library. Is there way to read native thumb image of original image we are fetching? — Nilesh Kikani, Mar 16 '18 at 11:59
Doesn't this answer help you? It looks fairly similar https://stackoverflow.com/questions/28887638/how-to-get-an-alasset-url-from-a-phasset — Scriptable, Mar 27 '18 at 14:23
Its same thing its providing me direct image path not a thumb path — Nilesh Kikani, Mar 27 '18 at 14:45

score 1 · Answer 1 · answered Apr 01 '18 at 16:07

1

getAssets takes a prepareForSizeDisplay prop. This uses PHCachingImageManager to request images of assets at a specified size.

Example:

RNPhotosFramework.getAssets({
    startIndex: 0,
    endIndex: 100,
    prepareForSizeDisplay: Rect(100,100),
    fetchOptions: {
        sourceTypes: ['userLibrary'],
        sortDescriptors: [{
            key: 'creationDate',
            ascending: true,
        }]
    }
}).then((response) => console.log(response.assets));

When the user taps the row in your FlatList, you can then fetch the full-size asset. Don't fetch the full-size asset until you need to display it.

answered Apr 01 '18 at 16:07

Aaron Brager

65,323
19
161
287

its not helpful to me. – Nilesh Kikani Apr 03 '18 at 11:09
What do you find unhelpful? – Aaron Brager Apr 03 '18 at 13:27
Actually i want direct thumb url. I think iPhone is already storing that thats why its load very smooth in iPhone gallery. – Nilesh Kikani Apr 04 '18 at 14:37
From the iOS Photos docs: *For faster performance with large numbers of assets—for example, when populating a collection view with thumbnails—the `PHCachingImageManager` subclass adds bulk preloading.* The API I recommended is the one intended for your use case. – Aaron Brager Apr 04 '18 at 20:53
Aaron, I got final solution for this by using native iOS module. Actually there is some issue with RNPhotosFramework, if you set prepareForSizeDisplay: Rect(100,100), then its freezes app without any error. I have tried lots of solution but finally i have created native iOS module and implement that in my code. – Nilesh Kikani Apr 26 '18 at 12:46
@NileshKikani Good to hear, can you post the code from your solution as a separate answer? – Aaron Brager Apr 26 '18 at 15:29
Yeah sure i will make separate demo here so it will be very useful to others. Actually React Native is not handling photos proper way so its better to use native integration foe better optimisation. – Nilesh Kikani Apr 28 '18 at 08:13

Nilesh Kikani · Accepted Answer · 2018-05-26T15:37:33.727

Finally i have my own solution for this question. I have tried all ways to resolve but i am not able to resolve it. Lastly i come to know that new Photo Library provide options to fetch resized image but thats what not working with react-native-photos-framework. My native experience will help me to resolve my issue, hope this will help you. Here is link with detail description and code.

Let me add here code snippets.

Import Native Photo Library

#import <Photos/Photos.h>

CGSize retinaSquare = CGSizeMake(600, 600);

PHImageRequestOptions *cropToSquare = [[PHImageRequestOptions alloc] init];
cropToSquare.resizeMode = PHImageRequestOptionsResizeModeExact;
cropToSquare.deliveryMode = PHImageRequestOptionsDeliveryModeOpportunistic;
[cropToSquare setSynchronous:YES];

NSURL *imageurl = [NSURL URLWithString:@"youimagepath"];

PHFetchResult* asset =[PHAsset fetchAssetsWithALAssetURLs:[NSArray arrayWithObjects:imageurl, nil] options:nil];

[[PHImageManager defaultManager] requestImageForAsset:(PHAsset *)[asset objectAtIndex:0] targetSize:retinaSquare contentMode:PHImageContentModeAspectFit                                                options:cropToSquare                                          resultHandler:^(UIImage *fetchedImage, NSDictionary *info) {

  NSData *imageData = UIImageJPEGRepresentation(fetchedImage,0.65);

  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
  NSTimeInterval timeStamp = [[NSDate date] timeIntervalSince1970];
  NSString *filePath = [[paths objectAtIndex:0] stringByAppendingPathComponent:[NSString stringWithFormat:@"%0.0f.jpg", timeStamp*1000]];
  NSError *error = nil;
  [imageData writeToFile:filePath options:NSDataWritingAtomic error:&error];
  NSURL* fileUrl = [NSURL fileURLWithPath:filePath];
  if(error){
    fileUrl = imageurl;
  }

  NSString *resizedImagePath = [NSString stringWithFormat:@"%@",fileUrl];

}];

this method will create a lot of new photos on the phone because we are making an in-app gallery — Muhammad Numan, Apr 27 '19 at 19:02
You can add your own function to delete images once its being uploaded to server. It need to be handle your side or you can use image without saving in your document directory. — Nilesh Kikani, Apr 29 '19 at 10:36
but i want to make only in app gallery and i do not want to upload photo to server — Muhammad Numan, May 01 '19 at 01:23
You can find demo here for that : https://github.com/logisticinfotech/react-native-resize-image — Nilesh Kikani, May 02 '19 at 10:50

How to get thumb image from Photolibrary image?

2 Answers2

Linked