I am implementing a zooming feature in a camera app using AVFoundation. I am scaling my preview view like this:
[videoPreviewView setTransform:CGAffineTransformMakeScale(cameraZoom, cameraZoom)];
Now, after I take a picture, I would like to zoom/crop the picture with the cameraZoom value before I save it to the camera roll. How best should I do this?
Edit: Using Justin's answer:
CGRect imageRect = CGRectMake(0.0f, 0.0f, image.size.width, image.size.height);
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], imageRect);
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, CGImageGetWidth(imageRef), CGImageGetHeight(imageRef), CGImageGetBitsPerComponent(imageRef), CGImageGetBytesPerRow(imageRef), CGImageGetColorSpace(imageRef), CGImageGetBitmapInfo(imageRef));
CGContextScaleCTM(bitmapContext, scale, scale);
CGContextDrawImage(bitmapContext, imageRect, imageRef);
CGImageRef zoomedCGImage = CGBitmapContextCreateImage(bitmapContext);
UIImage* zoomedImage = [[UIImage alloc] initWithCGImage:imageRef];
It is zooming the image, but it is not taking the center of it, but rather seems to be taking the top right area. (I'm not positive).
The other problem, (I should have been clearer in the OP), is that the image remains the same resolution, but I would rather just crop it down.
+ (UIImage*)croppedImageWithImage:(UIImage *)image zoom:(CGFloat)zoom
{
CGFloat zoomReciprocal = 1.0f / zoom;
CGPoint offset = CGPointMake(image.size.width * ((1.0f - zoomReciprocal) / 2.0f), image.size.height * ((1.0f - zoomReciprocal) / 2.0f));
CGRect croppedRect = CGRectMake(offset.x, offset.y, image.size.width * zoomReciprocal, image.size.height * zoomReciprocal);
CGImageRef croppedImageRef = CGImageCreateWithImageInRect([image CGImage], croppedRect);
UIImage* croppedImage = [[UIImage alloc] initWithCGImage:croppedImageRef scale:[image scale] orientation:[image imageOrientation]];
CGImageRelease(croppedImageRef);
return croppedImage;
}
to scale/zoom:
create a CGBitmapContext
alter the context's transform (CGContextScaleCTM)
draw the image (CGContextDrawImage) - the rect you pass may be used to offset the origin and/or dimensions.
generate a new CGImage from the context (CGBitmapContextCreateImage)
to crop:
create a CGBitmapContext. pass NULL so the context creates is buffer for the bitmap.
draw the image as-is (CGContextDrawImage)
create a CGBitmapContext for the crop (with the new dimensions), using an offset of the first context's pixel data for the buffer.
generate a new CGImage from the second context (CGBitmapContextCreateImage)
Related
I am working in iOS application where I want to select card rectangle from captured image using camera. So if anybody knows any solution please let me know. Thank you.
My code is below:
/**
* Cut out a image to a new image with the rect
*
* #param image UIImage image origin image
* #param rect CGRect rect the rect area you want
*
* #return UIImage
*/
+ (UIImage *)ct_imageFromImage:(UIImage *)image inRect:(CGRect)rect{
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat x= rect.origin.x*scale,y=rect.origin.y *scale,w=rect.size.width*scale,h=rect.size.height*scale;
CGRect dianRect = CGRectMake(x, y, w, h);
//cut the image with the rect area
CGImageRef sourceImageRef = [image CGImage];
CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, dianRect);
UIImage *newImage = [UIImage imageWithCGImage:newImageRef scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
return newImage;
}
I have been looking around to find a way to crop an image (imageView) inside ScrollView. What i need to achieve here is user pinch to zoom an image, (which is working great) and then able to crop ONLY the part of the image that is shown on the screen after the zoom. so in another words, if i have a series of number 1 to 10, user zoom it to see only number 4 and 5 and when user taps crop, i ONLY need image of 4 and 5 that was visible at the time of crop. I'm using this code...
- (UIImage *)croppedImageWithImage:(UIImage *)image zoom:(CGFloat)zoom
{
CGFloat zoomReciprocal = 1.0f / zoom;
CGRect croppedRect = CGRectMake(self.scrollView.contentOffset.x*zoom,
self.scrollView.contentOffset.y*zoom,
image.size.width * zoomReciprocal,
image.size.height * zoomReciprocal);
CGImageRef croppedImageRef = CGImageCreateWithImageInRect([image CGImage], croppedRect);
UIImage* croppedImage = [[UIImage alloc] initWithCGImage:croppedImageRef scale:[image scale] orientation:[image imageOrientation]];
CGImageRelease(croppedImageRef);
return croppedImage;
}
This method crops the image however, the x and y values are incorrect... What do i have to do to get the correct x and y of my crop area?
FYI.. the image i'm trying to crop is 2200 * 3200, not sure if that would make any difference?
I solved it!! here is the updated method for others who might come across this issue.
- (UIImage *)croppedImageWithImage:(UIImage *)image zoom:(CGFloat)zoom {
CGFloat zoomReciprocal = 1.0f / zoom;
CGFloat xOffset = image.size.width / self.scrollViewBackground.contentSize.width;
CGFloat yOffset = image.size.height / self.scrollViewBackground.contentSize.height;
CGRect croppedRect = CGRectMake(self.scrollViewBackground.contentOffset.x * xOffset,
self.scrollViewBackground.contentOffset.y * yOffset,
image.size.width * zoomReciprocal,
image.size.height * zoomReciprocal);
CGImageRef croppedImageRef = CGImageCreateWithImageInRect([image CGImage], croppedRect);
UIImage *croppedImage = [[UIImage alloc] initWithCGImage:croppedImageRef scale:[image scale] orientation:[image imageOrientation]];
CGImageRelease(croppedImageRef);
return croppedImage;
}
I'm developing an iOS 6 app for iPad. I've developed some code which rotates a UIImage. It works great with square images, but when the images aren't square they get cropped, so you only see a part of the image (a square).
My code:
UIGraphicsBeginImageContext(image.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM( context, 0.5f * image.size.width, 0.5f * image.size.height ) ;
CGContextRotateCTM( context, -1.5707963267949) ;
[image drawInRect:(CGRect){ { -imatgetemporal.size.width * 0.5f, -image.size.height * 0.5f }, image.size }];
UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
I think the problem is in the 0.5f, but I don't know how to solve it.
What can I do?
You need to make your graphics context big enough for the rotated image. You're using image.size, but should be using a the rotated size as the argument to UIGraphicsBeginImageContext. Additionally, your argument to drawInRect is incorrect. You need to offset the (rotated) origin x, which determines the y origin of the final image, in the following way: "Up" by half the original height (which puts the final image entirely off the top of the drawing context) then "down" by the full original width, which is the final image height.
const CGSize imageSize = image.size;
UIGraphicsBeginImageContext(CGSizeMake(imageSize.height, imageSize.width));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.5f * imageSize.width, 0.5f * imageSize.height ) ;
CGContextRotateCTM(context, -1.5707963267949) ;
[image drawInRect:(CGRect){ { imageSize.height * 0.5 - imageSize.width, -imageSize.width * 0.5f }, imageSize }];
UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
I want to rotate a UIImageView with the press of a button. I am using this code:
#import "UIImage-Extensions.h"
UIImage *rotatedImage = [SplashItGroupPicker.image imageRotatedByDegrees:360/arrayCount];
SplashItGroupPicker.image = rotatedImage;
and in "UIImage-Extensions.h" i have:
#interface UIImage (CS_Extensions)
- (UIImage *)imageRotatedByRadians:(CGFloat)radians;
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees;
and in the .m:
- (UIImage *)imageRotatedByRadians:(CGFloat)radians
{
return [self imageRotatedByDegrees:RadiansToDegrees(radians)];
}
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees
{
// calculate the size of the rotated view's containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(DegreesToRadians(degrees));
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
// // Rotate the image context
CGContextRotateCTM(bitmap, DegreesToRadians(degrees));
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
...the rotation works fine, but when the image is rotated, the image also gets smaller and I can't understand why. Any ideas?
Here's a guess, is this only happening on Retina screens? Whenever saving a UIImage from a graphics context, you need to make sure the scale is correct. This is how I have done it:
CGFloat scale = [[UIScreen mainScreen] scale];
CGSize size = CGSizeMake(rotatedViewBox.frame.size.width * scale, rotatedViewBox.frame.size.height * scale);
UIGraphicsBeginImageContext( size );
/* Do your image manipulations here */
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// overwrite the image with one that has the correct scale set
newImage = [UIImage imageWithCGImage:newImage.CGImage scale:scale orientation:newImage.imageOrientation];
Using Kekoa's snippet (thanks a ton), I was able to get a working rotateImage function that works on retina devices based on Apples rotateImage code:
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees {
CGFloat radians = DegreesToRadians(degrees);
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(radians);
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
UIGraphicsBeginImageContextWithOptions(rotatedSize, NO, [[UIScreen mainScreen] scale]);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(bitmap, rotatedSize.width / 2, rotatedSize.height / 2);
CGContextRotateCTM(bitmap, radians);
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2 , self.size.width, self.size.height), self.CGImage );
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
There is no need to UIGraphicsGetImageFromCurrentImageContext. its a way to get screenshot of desired portion of mainscreen. so the result image quality affected. the only way to get Rotated Image is...
first rotate your image view by(if you want to show rotated view)
[mainImgV setTransform:CGAffineTransformRotate(mainImgV.transform, M_PI)];
it will rotate your imageview.
now you will take this rotated image by these lines.(you can call these lines without rotate imgaeview also.)
CGImageRef cgRef = mainImgV.image.CGImage;
newImage = [[UIImage alloc] initWithCGImage:cgRef scale:1.0 orientation:UIImageOrientationDown];
there is no need to save or take screenshot or compromise bad quality image. just enjoy coding.
I have a demo app here https://github.com/rdetert/image-transform-test
After importing an image, you can pinch, zoom, rotate the image. What I want to do is save out a 640x480 image (landscape mode) that looks identical to the live preview. So if there are 100px bars of empty space on the sides, I need the same empty bars in the final output (scaled appropriately).
This is proving to be more difficult than I thought it would be. I can't quite get it to come out right after days of working on it.
The magic method that generates the final image is called -(void)generateFinalImage
Good luck! ;)
EDIT
The green rectangle represents the actual area the imported image can be pinched, zoomed and rotated. The resolution on the iPhone 4S is 852x640, for example.
The blue rectangle is just a live preview for debugging and it's aspect ratio is the same as 640x480. The live preview could get very slow due to Core Image being very slow.
What I want to do is convert whatever is in the green rectangle to a 640x480 image. Notice the 852x640 is a slightly different aspect ratio than 640x480 too, but that isn't a huge problem.
Is your goal is to obtain just the exact copy of what you are editing, but with the size of the original image?
I guess it could be obtained by something like this:
- (UIImage *)padImage:(UIImage *)img to:(CGSize)size
{
if (size.width < img.size.width && size.height < img.size.height) return img;
size.width = MAX(size.width, img.size.width);
size.height = MAX(size.height, img.size.height);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, size.width, size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGRect centeredRect = CGRectMake((size.width - img.size.width)/2.0, (size.height - img.size.height)/2.0, img.size.width, img.size.height);
CGContextDrawImage(context, centeredRect, [img CGImage]);
CGImageRef imageRef = CGBitmapContextCreateImage(context);
CGColorSpaceRelease(colorSpace);
CGContextRelease(context);
UIImage *paddedImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return paddedImage;
}
// final image size must be 640x480
- (void)generateFinalImage
{
float rotatableCanvasWidth = 495.0;
float rotatableCanvasHeight = 320.0;
UIImage *tmp = self.importedRawImage;
CGSize size = self.importedRawImage.size;
NSLog(NSStringFromCGSize(size));
tmp = [self padImage:tmp to:CGSizeMake(rotatableCanvasWidth, rotatableCanvasHeight)];
CIImage *ciImage = [[CIImage alloc] initWithImage:[tmp imageWithTransform:self.importedImageView.transform]];
CGPoint center = CGPointMake(size.width / 2.0, size.height / 2.0);
CIContext *context = [CIContext contextWithOptions:nil];
CGRect r = ciImage.extent;
r.origin.x = (r.size.width - rotatableCanvasHeight) / 2.0;
r.origin.y = (r.size.height - rotatableCanvasWidth) / 2.0;
r.size.width = rotatableCanvasHeight;
r.size.height = rotatableCanvasWidth;
self.finalImage = [UIImage imageWithCGImage:[context createCGImage:ciImage fromRect:r] scale:1.0 orientation:UIImageOrientationUp];
self.finalImage = [self.finalImage resizedImage:CGSizeMake(100.0f, 134.0f) interpolationQuality:kCGInterpolationHigh];
self.previewImageView.image = self.finalImage;
}