Quality and size of image after cropping

[mmajors]

Hi,

First, I would like to say that you did an awesome job with this component.

Running the test project, I am selecting an image from my camera roll that is:
1,856,278 bytes (1.9 MB on disk)

Running through all 3 options (Custom Crop, Normal Crop, and Resizable Custom Crop) and not cropping the image in anyway, I am capturing the size of the image when I select the Use button.
Custom Crop -> 12,210,978 bytes
Normal Crop -> 330,878 bytes
Resizable Custom Crop -> 287,723 bytes

I have the latest code and I am wondering if you could help me out here. I am working on a project where the user can crop an image and then I upload that image. When I upload, the size of the image is drastically reduced. Any help would be appreciated.

Thanks and keep up the good work.

[gekitz]

If you have a crop area of 200x200px the actual image has the same size and that's why the quality loss takes place.

I'll investigate it, but it seems that the "custom crop" gives as a better result than the "normal crop" (which is Apple's build in solution") and I already explained why the quality loss occurs. Still If you have any idea how to make it better, I'm happy to discuss it and make the component better.

[mmajors]

Thanks for your feedback. I found the following on StackOverflow.

ou're cropping based on the screen size. You'll want to crop based on the visible area of the image. If you're cropping based on the screen size, you'll end up with a 960x640 image at the most (when doing it on a Retina device).

[gekitz]

please check out the experimental/better-crop-image-quality branch of the project.
I think I could fix the issue you, do me a favor and verify it.

[K-Be]

Hi, my english not very well, but I'm trying.

Your GKImagePicker is very good library. I'm using part of the library in my project as set of files (not a git submodule). I'm using GKImageCropViewController. I'v found one problem with dimentions of image after crop, and fix this problem. There is the problem in this lines in GKImageView:

CGFloat scale = self.scrollView.maximumZoomScale / self.scrollView.zoomScale;
        UIGraphicsBeginImageContextWithOptions(self.scrollView.frame.size, self.scrollView.opaque, scale);

If I set cropSize=CGSizeMake(320.f, 320.f) then i will have thees values: sclollView.zoomScale = 1, scrollView.maximumZoomScale = 20. And then value of scale = 20. It means that result image will have new parameters: viewImage.scale = 20, viewImage.size = CGSize(320.f, 320.f).

If you look at describe of scale property of UIImage, you can see:

If you load an image from a file whose name includes the @2x modifier, the scale is set to 2.0. You can also specify an explicit scale factor when initializing an image from a Core Graphics image. All other images are assumed to have a scale factor of 1.0.
If you multiply the logical size of the image (stored in the size property) by the value in this property, you get the dimensions of the image in pixels.

Real dimention of imageView = CGSize(6400 * 6400); (result image)
I'v fixed it in my project, but only for static crop rect. I'm not sure, than my fixes are correct in all code if GK-library.
This is core of my changes:

- (void)layoutSubviews
{
   [super layoutSubviews];

   CGSize cropSize = self.cropSize;
   CGFloat toolbarSize = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad ? 0 : 54;
   self.xOffset = floor((CGRectGetWidth(self.bounds) - cropSize.width) * 0.5);
   self.yOffset = floor((CGRectGetHeight(self.bounds) - toolbarSize - cropSize.height) * 0.5);

   CGFloat imageHeight = self.imageToCrop.size.height;
   CGFloat imageWidth = self.imageToCrop.size.width;


    CGRect imageViewFrame = CGRectMake(0, 0, imageWidth, imageHeight);
    self.imageView.frame = imageViewFrame;

   self.cropOverlayView.frame = self.bounds;
   self.scrollView.frame = CGRectMake(self.xOffset, self.yOffset, cropSize.width, cropSize.height);
    self.scrollView.contentSize = imageViewFrame.size;
    [self updateMinZoom];
}


- (void)updateMinZoom
{
    CGSize imageSize = self.imageToCrop.size;
    CGFloat zoomWidth = self.scrollView.frame.size.width / imageSize.width;
    CGFloat zoomHeight = self.scrollView.frame.size.height / imageSize.height;
    CGFloat minZoom = MAX(zoomWidth, zoomHeight);
    self.scrollView.minimumZoomScale = minZoom;
    self.scrollView.zoomScale = minZoom;
}

//croppedImage on one of the branches

     CGFloat zoom = self.scrollView.zoomScale;
         CGSize imageVisibleSize = CGSizeMake(self.cropSize.width / zoom, self.cropSize.height / zoom);
         CGPoint scrollViewOffset = self.scrollView.contentOffset;
         CGPoint imageOffset = CGPointMake(scrollViewOffset.x / zoom, scrollViewOffset.y / zoom);

         CGRect imageVisibleRect = CGRectZero;
         imageVisibleRect.size = imageVisibleSize;
         imageVisibleRect.origin = imageOffset;

         UIImage* imageToCrop = self.imageToCrop;
         CGSize imageToCropSize = imageToCrop.size;

         UIGraphicsBeginImageContext(imageVisibleSize);
         [imageToCrop drawInRect:CGRectMake(-imageOffset.x, -imageOffset.y, imageToCropSize.width, imageToCropSize.height)];

         viewImage = UIGraphicsGetImageFromCurrentImageContext();

         UIGraphicsEndImageContext();

         NSLog(@"cropped image size = %@", NSStringFromCGSize(viewImage.size));

My changes are not universal, but good for my project.
If you want, I can send for you changed GKImageCropView.h and GKImageCropView.m for you.

[gekitz]

The quality of the custom crop has been improved with commit 2a91f31

The quality of the resizeable custom crop still needs some improvement therefore I created a new issue #12