react-native-fast-image icon indicating copy to clipboard operation
react-native-fast-image copied to clipboard

Is there any way to get the source data from an rendered image?

Open margox opened this issue 6 years ago • 10 comments

I am using FastImage in my app, it's pretty fast and awesome, very thanks!

In my app, people can share photo to others, the share function is provided by ActionSheetIOS.showShareActionSheetWithOptions, which I can pass a local file or a base64-encoded uri to it, but the photo is already rendered by FastImage, I don't want fetch it from server again, so I want to know is there any way to get the source data or cached file path from an rendered image?

margox avatar Jun 05 '18 02:06 margox

I did some modification in FFFastImageView.m:

#import "FFFastImageView.h"
// modify start
#import <SDWebImage/SDWebImageManager.h>
// modify end

@implementation FFFastImageView {
    BOOL hasSentOnLoadStart;
    BOOL hasCompleted;
    BOOL hasErrored;
    // modify start
    SDWebImageManager* imageManager;
    // modify end
    NSDictionary* onLoadEvent;
}

- (id) init {
  
    self = [super init];
    self.resizeMode = RCTResizeModeCover;
    self.clipsToBounds = YES;
    // modify start
    imageManager = [SDWebImageManager sharedManager];
    // modify end

    return self;

}

- (void)setResizeMode:(RCTResizeMode)resizeMode
{
    if (_resizeMode != resizeMode) {
        _resizeMode = resizeMode;
        self.contentMode = (UIViewContentMode)resizeMode;
    }
}

- (void)setOnFastImageLoadEnd:(RCTBubblingEventBlock)onFastImageLoadEnd {
    _onFastImageLoadEnd = onFastImageLoadEnd;
    if (hasCompleted) {
        _onFastImageLoadEnd(@{});
    }
}

- (void)setOnFastImageLoad:(RCTBubblingEventBlock)onFastImageLoad {
    _onFastImageLoad = onFastImageLoad;
    if (hasCompleted) {
        _onFastImageLoad(onLoadEvent);
    }
}

- (void)setOnFastImageError:(RCTDirectEventBlock)onFastImageError {
    _onFastImageError = onFastImageError;
    if (hasErrored) {
        _onFastImageError(@{});
    }
}

- (void)setOnFastImageLoadStart:(RCTBubblingEventBlock)onFastImageLoadStart {
    if (_source && !hasSentOnLoadStart) {
        _onFastImageLoadStart = onFastImageLoadStart;
        onFastImageLoadStart(@{});
        hasSentOnLoadStart = YES;
    } else {
        _onFastImageLoadStart = onFastImageLoadStart;
        hasSentOnLoadStart = NO;
    }
}

- (void)setSource:(FFFastImageSource *)source {
    if (_source != source) {
        _source = source;
        
        // Set headers.
        [_source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) {
            [[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key];
        }];
        
        // Set priority.
        SDWebImageOptions options = 0;
        options |= SDWebImageRetryFailed;
        switch (_source.priority) {
            case FFFPriorityLow:
                options |= SDWebImageLowPriority;
                break;
            case FFFPriorityNormal:
                // Priority is normal by default.
                break;
            case FFFPriorityHigh:
                options |= SDWebImageHighPriority;
                break;
        }
        
        if (_onFastImageLoadStart) {
            _onFastImageLoadStart(@{});
            hasSentOnLoadStart = YES;
        } {
            hasSentOnLoadStart = NO;
        }
        hasCompleted = NO;
        hasErrored = NO;
        
        // Load the new source.
        [self sd_setImageWithURL:_source.uri
                placeholderImage:nil
                         options:options
                        progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
                            if (_onFastImageProgress) {
                                _onFastImageProgress(@{
                                                       @"loaded": @(receivedSize),
                                                       @"total": @(expectedSize)
                                                       });
                            }
                        } completed:^(UIImage * _Nullable image,
                                      NSError * _Nullable error,
                                      SDImageCacheType cacheType,
                                      NSURL * _Nullable imageURL) {
                            if (error) {
                                hasErrored = YES;
                                if (_onFastImageError) {
                                    _onFastImageError(@{});
                                }
                                if (_onFastImageLoadEnd) {
                                    _onFastImageLoadEnd(@{});
                                }
                            } else {

                                // modify start
                                NSString *key = [imageManager cacheKeyForURL:imageURL];
                                NSString *source = [imageManager.imageCache defaultCachePathForKey:key];
                                hasCompleted = YES;
                                onLoadEvent = @{
                                                @"source":source,
                                                @"width":[NSNumber numberWithDouble:image.size.width],
                                                @"height":[NSNumber numberWithDouble:image.size.height]
                                                };
                                // modify end
                                if (_onFastImageLoad) {
                                    _onFastImageLoad(onLoadEvent);
                                }
                                if (_onFastImageLoadEnd) {
                                    _onFastImageLoadEnd(@{});
                                }
                            }
                        }];
    }
}

@end

So now I can get the local file path from the param of onLoad callback, and I can save the cached image into my camera roll by using CameraRoll.saveToCameraRoll, no need to get it from internet again.

margox avatar Jun 06 '18 06:06 margox

Interesting use case. I'll re-open this. Sorry I didn't reply earlier. I don't think it's a very common use case so I can't commit to getting this in soon, but I'll keep the issue open.

For Android I think Glide actually caches a scaled down version of the image in some instances, so this might not be very effective in that case.

DylanVann avatar Jun 07 '18 17:06 DylanVann

@DylanVann - Actually, most probably the case is pretty common as most apps out there offer the option of sharing an image. I currently re-download the image... I would of course love to use the cached version of I was able to somehow access it.

compojoom avatar Jun 11 '18 08:06 compojoom

I can look into it at some point. Currently my top priorities are:

  • Add better error logging (better error callbacks, error codes).
  • Add a default image prop.
  • Make sure performance of major changes is good enough.
  • Do a new major release.

After that I'll take a look at other new features.

DylanVann avatar Jun 15 '18 05:06 DylanVann

I could also use this functionality. I would be happy to help on the iOS side of things.

brenwell avatar Jul 27 '18 17:07 brenwell

@margox can you make a pull request, seems like your solution is a non-breaking change ??

brenwell avatar Jul 27 '18 17:07 brenwell

Please add this feature to new version, i really need it.

ThienMD avatar Jun 07 '19 03:06 ThienMD

@DylanVann any news regarding this? 🤞

alexandrumic avatar Aug 17 '20 06:08 alexandrumic

Interested in this feature

babyrusa avatar Jan 26 '22 02:01 babyrusa

#877

ameer-taghavi avatar Feb 18 '22 11:02 ameer-taghavi