Get full resolution image?

[adbl]

Thanks for a great library!

In our use case we first present photo thumbnails in a collection (user can keep scrolling to see all theirs photos), user picks one to preview and then send it. We want to make sure the max resolution image gets sent at that point.

After checking around in this library/RN and apple docs, I think I have understood the following:

• The size of the Image will determine the targetSize to get from photos. In our case, since the thumbnails are small they get downloaded quickly while scrolling down, even without using the caching option. When going into preview a larger version version of the image gets downloaded, nice!
• The high quality deliveryMode (which is default), will download a smaller than full resolution image, depending on the Image view component size.
• Max resolution is downloaded with resizeMode=PHImageRequestOptionsResizeModeNone and targetSize= PHImageManagerMaximumSizewhich RCTImageLoaderRNPhotosFramework sets if size is CGSizeZero, but that is only the case for Image using capInsets (?? according to reloadImage in RCTImageView.m)

Could we add an option to withOptions to support this?

[olofd]

Hi! Would be glad to help, but let me ask you:

How are you sending the image? Some custom ObjC-code I would guess? If that's correct I guess you are loading the image with the imageloader defined in this library or by using the React Natives imageLoader that you can use via the bridge in native modules?

If that's the case this is only an extension in our imageLoader?

We could make the extension of course, but it would seem easier, I you already have custom ObjC-code to just load the desired image yourself using PhotoFramework, in the format you like and then send the bytes.

Enlighten me if you are using some RN-feature to send the actual image. Like if RN's XHR has the ability to post images loaded with RN.. Is that the case?

Sry if I'm confused. Would like to help, just need some more info.

[adbl]

I realized that my request doesn't make sense anymore, but I'll answer your questions anyway because I learned I few things which may be useful.

A) RN XHR can send binary "file" data from things that implement RCTURLRequestHandler interface. In fact, the RCTImageLoader implements it too (it seems) checking all available image loaders, (but it needs a recompress which is not ideal). If this library implemented the RCTURLRequestHandler directly, sending the "raw" file with XHR would be supported out of the box.

B) In our case we first use the RN ImageEditor to allow the user to crop the image (but at a fixed pretty high resolution...), ImageEditor uses the ImageLoader method which doesn't specify size, so max resolution will be used. It then places the cropped Image in ImageStore which implement both ImageLoader and RCTURLRequestHandler. We could send it with XHR directly using the ImageStore uri, but we also need to store the file locally so we have a piece of native code which writes the data to a file before sending it (using react-native-fetch-blob due to other reasons).

C) when we really need to load the full resolution image in a view (for example to do interactive crop/zoom preview), we should just set the style width/height as specified by the asset and it will get loaded (then put in a ScrollView or something).

I elaborated on some of this here https://github.com/wkh237/react-native-fetch-blob/issues/218

[olofd]

Sounds good. I will definitely look into implementing RCTURLRequestHandler. Did not know it existed before this and I sounds like a feature we should support. Let me know if there is anything else I can help with.

[olofd]

@adbl Should we close this?

FYI: I'm implementing RCTURLRequestHandler at the moment. It will land next week. (I know you found another solution, but I still thought it made sense to implement the interface).

[adbl]

Nice to hear! Feel free to reference this issue when that's merged in case someone searching for this kind of stuff to help put the pieces together

[olofd]

RCTURLRequestHandler implementation is now released under 1.0 on npm.