UIImage: fill background - objective-c

I've made this below fitImage function which takes an UIImage and a CGSize. In case the input image is larger then the input box, the image would be scaled down to fill into the box. If the box and image does not have the same ratio the image does not fill the box entirely, and there would be some visible background. In this case this background is always white. How can I change this to e.g. a black background?
+ (UIImage*) fitImage:(UIImage*)image inBox:(CGSize)size {
if (image.size.width==size.width && image.size.height==size.height)
return image;
if (image.size.width<size.width && image.size.height<size.height)
return [Util scaleImage:image toSize:size];
float widthFactor = size.width / image.size.width;
float heightFactor = size.height / image.size.height;
CGSize scaledSize = size;
if (widthFactor<heightFactor) {
scaledSize.width = size.width;
scaledSize.height = image.size.height * widthFactor;
} else {
scaledSize.width = image.size.width * heightFactor;
scaledSize.height = size.height;
}
UIGraphicsBeginImageContextWithOptions( size, NO, 0.0 );
float marginX = (size.width-scaledSize.width)/2;
float marginY = (size.height-scaledSize.height)/2;
CGRect scaledImageRect = CGRectMake(marginX, marginY, scaledSize.width, scaledSize.height );
[image drawInRect:scaledImageRect];
UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return scaledImage;
}
Please tell me if you need further information.
Solution:
+ (UIImage*) fitImage:(UIImage*)image inBox:(CGSize)size withBackground:(UIColor*)color {
if (image.size.width==size.width && image.size.height==size.height)
return image;
if (image.size.width<size.width && image.size.height<size.height)
return [Util scaleImage:image toSize:size];
float widthFactor = size.width / image.size.width;
float heightFactor = size.height / image.size.height;
CGSize scaledSize = size;
if (widthFactor<heightFactor) {
scaledSize.width = size.width;
scaledSize.height = image.size.height * widthFactor;
} else {
scaledSize.width = image.size.width * heightFactor;
scaledSize.height = size.height;
}
UIGraphicsBeginImageContextWithOptions( size, NO, 0.0 );
float marginX = (size.width-scaledSize.width)/2;
float marginY = (size.height-scaledSize.height)/2;
CGRect scaledImageRect = CGRectMake(marginX, marginY, scaledSize.width, scaledSize.height );
UIImage* temp = UIGraphicsGetImageFromCurrentImageContext();
[color set];
UIRectFill(CGRectMake(0.0, 0.0, temp.size.width, temp.size.height));
[image drawInRect:scaledImageRect];
UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return scaledImage;
}

You can use UIRectFill(rect) to fill the background of a bitmap context with the current fill color. To set the fill color you can use [UIColor set].
e.g.
//Get a temp image to determine the size of the bitmap context
UIImage* temp = UIGraphicsGetImageFromCurrentImageContext();
[[UIColor redColor] set]; //set the desired background color
UIRectFill(CGRectMake(0.0, 0.0, temp.size.width, temp.size.height)); //fill the bitmap context
[image drawInRect:scaledImageRect]; //draw your image over the filled background

Related

Can UIimage change the size and resolution of pictures?

If I pick a 640*960 picture and put it into a 200*300 UIImage,then will that picture uploaded to services as a 200*300 picture .
You can use following methods to resize your image:
+ (UIImage *) imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
//UIGraphicsBeginImageContext(newSize);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
+ (UIImage *) imageWithImage: (UIImage*) sourceImage scaledToWidth: (float) i_width {//method to scale image accordcing to width
float oldWidth = sourceImage.size.width;
float scaleFactor = i_width / oldWidth;
float newHeight = sourceImage.size.height * scaleFactor;
float newWidth = oldWidth * scaleFactor;
UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight));
[sourceImage drawInRect:CGRectMake(0, 0, newWidth, newHeight)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Create the image from a png file
imageOriginal = [UIImage imageNamed:#"bg-640by960.png"];
imageView =[[UIImageView alloc] initWithImage:imageOriginal];
imageView.tag=200;
// Get size of current image
size = [imageOriginal size];
// Frame location in view to show original image
[imageView setFrame:CGRectMake(0, 0, size.width, size.height)];
[[self view] addSubview:imageView];
[self.view bringSubviewToFront:btnCrop];
//To resize image call below method
[[self.view viewWithTag:200] removeFromSuperview];
[self squareImageWithImage:imageOriginal scaledToSize:CGSizeMake(200, 300)];
}
- (UIImage *)squareImageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize
{
double ratio;
double delta;
CGPoint offset;
//make a new square size, that is the resized imaged width
CGSize sz = CGSizeMake(newSize.width, newSize.width);
//figure out if the picture is landscape or portrait, then
//calculate scale factor and offset
if (image.size.width > image.size.height) {
ratio = newSize.width / image.size.width;
delta = (ratio*image.size.width - ratio*image.size.height);
offset = CGPointMake(delta/2, 0);
} else {
ratio = newSize.width / image.size.height;
delta = (ratio*image.size.height - ratio*image.size.width);
offset = CGPointMake(0, delta/2);
}
//make the final clipping rect based on the calculated values
CGRect clipRect = CGRectMake(-offset.x, -offset.y,
(ratio * image.size.width) + delta,
(ratio * image.size.height) + delta);
//start a new context, with scale factor 0.0 so retina displays get
//high quality image
if ([[UIScreen mainScreen] respondsToSelector:#selector(scale)]) {
UIGraphicsBeginImageContextWithOptions(sz, YES, 0.0);
} else {
UIGraphicsBeginImageContext(sz);
}
UIRectClip(clipRect);
[image drawInRect:clipRect];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
imageView =
[[UIImageView alloc] initWithImage:newImage];
[imageView setFrame:CGRectMake(60, 60, newSize.width, newSize.height)];
[self.view addSubview:imageView];
return newImage;
}

Simple resizing of UIImage in XCODE

Is there any way how to resize UIImage in as few lines as possible? I don't mind of ratio, I just want to set image resolution to 80x60. That's all
This may be overkill but, you can simply take your image, and create a graphics context at that resolution you want, then you can set the tempImage as the UIImageView, overwriting it.
UIImage *image = YourImageView.image;
UIImage *tempImage = nil;
CGSize targetSize = CGSizeMake(80,60);
UIGraphicsBeginImageContext(targetSize);
CGRect thumbnailRect = CGRectMake(0, 0, 0, 0);
thumbnailRect.origin = CGPointMake(0.0,0.0);
thumbnailRect.size.width = targetSize.width;
thumbnailRect.size.height = targetSize.height;
[image drawInRect:thumbnailRect];
tempImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
YourImageView.image = tempImage;
- (void)resizeImage:(UIImage *)image
{
CGSize origImageSize = [image size];
CGRect imageRect = CGRectMake(0, 0, 80, 60);
float ratio = MAX(newRect.size.width / origImageSize.width,
newRect.size.height / origImageSize.height);
UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 0.0);
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect
cornerRadius:5.0];
[path addClip];
CGRect imageRect;
imageRect.size.width = ratio * origImageSize.width;
imageRect.size.height = ratio * origImageSize.height;
imageRect.origin.x = (newRect.size.width - imageRect.size.width) / 2.0;
imageRect.origin.y = (newRect.size.height - imageRect.size.height) / 2.0;
[image drawInRect:imageRect];
UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();
NSData *data = UIImagePNGRepresentation(smallImage);
UIGraphicsEndImageContext();
}
Do not forget to add CoreGraphics frameawork.
Use this class (add code to .h file accordingly)
#import "UIImage+Resize.h"
#implementation UIImage (Resize)
- (UIImage *)resizedImage:(CGSize)bounds {
return [self resizedImage:bounds upScale:YES];
}
- (UIImage*)resizedImage:(CGSize)bounds upScale:(BOOL)upScale {
CGSize originalSize = self.size;
float xScale = bounds.width / originalSize.width;
float yScale = bounds.height / originalSize.height;
float scale = MIN(xScale, yScale);
if (!upScale) {
scale = MIN(scale, 1);
}
CGSize newSize = CGSizeMake(originalSize.width * scale, originalSize.height * scale);
UIGraphicsBeginImageContextWithOptions(newSize, NO, [UIScreen mainScreen].scale);
[self drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return resultImage;
}
I've found the following code on this page:
- (UIImage*)imageWithImage: (UIImage*) sourceImage scaledToWidth: (float) i_width{
if (sourceImage.size.width>sourceImage.size.height) {
sourceImage = [[UIImage alloc] initWithCGImage: sourceImage.CGImage
scale: 1.0
orientation: UIImageOrientationRight];
}
float oldWidth = sourceImage.size.width;
float scaleFactor = i_width / oldWidth;
float newHeight = sourceImage.size.height * scaleFactor;
float newWidth = oldWidth * scaleFactor;
UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight)); [sourceImage drawInRect:CGRectMake(0, 0, newWidth, newHeight)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();
return newImage;
}
All you have to do is provide it with the i_width, and it will scale it accordingly.
I've added a little twist to it, so that if the picture is in landscape mode, it will be rotated to portrait, and then resized. If you want it to be the opposite (portrait to landscape), change this:
if (sourceImage.size.width>sourceImage.size.height) {
sourceImage = [[UIImage alloc] initWithCGImage: sourceImage.CGImage
scale: 1.0
orientation: UIImageOrientationRight];
}
to this:
if (sourceImage.size.height>sourceImage.size.width) {
sourceImage = [[UIImage alloc] initWithCGImage: sourceImage.CGImage
scale: 1.0
orientation: UIImageOrientationRight];
}
CAVEAT: my rotating method doesn't take into consideration if the picture is pointing left or right. In other words, If an image is landscape by upside down, my code can't recognise that. I hope someone else can shed some light on this though :)

How to optimize UIImage scaling for fast scaling

People, i need your help.
Need optimizing scaling images on flow. I try two methods for scale image with save proportions, please inspect this code and say, how i can it optimize if you want/can:
// Draw image in rect (PNG 1000ms, JPG 834ms for 8 pictures)
+ (UIImage *)imageWithImage:(UIImage *)sourceImage
scaledToSizeWithSameAspectRatio:(CGSize)targetSize
withInterpolationQuality:(CGInterpolationQuality)quality
{
CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;
CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;
CGPoint thumbnailPoint = (CGPoint){0.0, 0.0};
if (CGSizeEqualToSize(imageSize, targetSize) == NO) {
CGFloat widthFactor = targetWidth / width;
CGFloat heightFactor = targetHeight / height;
if (widthFactor > heightFactor) {
scaledWidth = width * widthFactor;
scaledHeight = height * widthFactor;
thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
}
else {
scaledWidth = width * heightFactor;
scaledHeight = height * heightFactor;
thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
}
}
UIGraphicsBeginImageContextWithOptions(targetSize, YES, 1.0);
dispatch_sync(dispatch_queue_create("pro.idev.itux.projectNameHere", DISPATCH_QUEUE_SERIAL), ^{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetInterpolationQuality(ctx, quality);
[sourceImage drawInRect:(CGRect){thumbnailPoint, {scaledWidth, scaledHeight}}];
});
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
// Draw CGImage in rect (PNG 1326ms, JPG 1026ms for 8 pictures)
+ (UIImage *)imageWithCGImage:(CGImageRef)sourceImage
scaledToSizeWithSameAspectRatio:(CGSize)targetSize
withInterpolationQuality:(CGInterpolationQuality)quality
{
CGFloat width = CGImageGetWidth(sourceImage);
CGFloat height = CGImageGetHeight(sourceImage);
CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;
CGPoint thumbnailPoint = (CGPoint){0.0, 0.0};
if (CGSizeEqualToSize((CGSize){width, height}, targetSize) == NO) {
CGFloat widthFactor = targetWidth / width;
CGFloat heightFactor = targetHeight / height;
if (widthFactor > heightFactor) {
scaledWidth = width * widthFactor;
scaledHeight = height * widthFactor;
thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
}
else {
scaledWidth = width * heightFactor;
scaledHeight = height * heightFactor;
thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
}
}
UIGraphicsBeginImageContextWithOptions(targetSize, YES, 1.0);
dispatch_sync(dispatch_queue_create("pro.idev.itux.projectNameHere", DISPATCH_QUEUE_SERIAL), ^{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(ctx, 0, targetHeight);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextSetInterpolationQuality(ctx, quality);
CGContextDrawImage(ctx, (CGRect){thumbnailPoint, {scaledWidth, scaledHeight}}, sourceImage);
});
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}

How to scale an image to a frame?

Is it possible to scale a UIImage to the size of the frame? Take a big image and "force it in" the smaller box.
Please provide an example
If you are actually talking about changing the UIImage and not just changing the display frame, which can be done as described by Mark, by changing the UIViewContentMode of the UIImageView, you can change the size of the actual image with the following UIImage extension (taken from this source)
- (UIImage*)imageByScalingAndCroppingForSize:(CGSize)targetSize
{
UIImage *sourceImage = self;
UIImage *newImage = nil;
CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;
CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;
CGFloat scaleFactor = 0.0;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;
CGPoint thumbnailPoint = CGPointMake(0.0,0.0);
if (CGSizeEqualToSize(imageSize, targetSize) == NO)
{
CGFloat widthFactor = targetWidth / width;
CGFloat heightFactor = targetHeight / height;
if (widthFactor > heightFactor)
scaleFactor = widthFactor; // scale to fit height
else
scaleFactor = heightFactor; // scale to fit width
scaledWidth = width * scaleFactor;
scaledHeight = height * scaleFactor;
// center the image
if (widthFactor > heightFactor)
{
thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
}
else
if (widthFactor < heightFactor)
{
thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
}
}
UIGraphicsBeginImageContext(targetSize); // this will crop
CGRect thumbnailRect = CGRectZero;
thumbnailRect.origin = thumbnailPoint;
thumbnailRect.size.width = scaledWidth;
thumbnailRect.size.height = scaledHeight;
[sourceImage drawInRect:thumbnailRect];
newImage = UIGraphicsGetImageFromCurrentImageContext();
if(newImage == nil)
NSLog(#"could not scale image");
//pop the context to get back to the default
UIGraphicsEndImageContext();
return newImage;
}
possible dupe of this question:
How to scale a UIImageView proportionally?
I'll copy over the accepted answer text as well. Assuming your frame is a uiview:
imageView.contentMode = UIViewContentModeScaleAspectFit;
will do what you want.
from the docs, here are the other scaling options
UIViewContentMode
Specifies how a view adjusts its content when its size changes.
typedef enum {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
UIViewContentModeRedraw,
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
} UIViewContentMode;
apple Documentation here:
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIImageView_Class/Reference/Reference.html

Existing implementation of cropImage:to:andScaleTo: and straightenAndScaleImage()?

I'm writing code to use UIImagePickerController. Corey previously posted some nice sample code on SO related to cropping and scaling. However, it doesn't have implementations of cropImage:to:andScaleTo: nor straightenAndScaleImage().
Here's how they're used:
newImage = [self cropImage:originalImage to:croppingRect andScaleTo:scaledImageSize];
...
UIImage *rotatedImage = straightenAndScaleImage([editInfo objectForKey:UIImagePickerControllerOriginalImage], scaleSize);
Since I'm sure someone must be using something very similar to Corey's sample code, there's probably an existing implementation of these two functions. Would someone like to share?
If you check the post you linked to, you'll see a link to the apple dev forums where I got some of this code, here are the methods you are asking about. Note: I may have made some changes relating to data types, but I can't quite remember. It should be trivial for you to adjust if needed.
- (UIImage *)cropImage:(UIImage *)image to:(CGRect)cropRect andScaleTo:(CGSize)size {
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef subImage = CGImageCreateWithImageInRect([image CGImage], cropRect);
CGRect myRect = CGRectMake(0.0f, 0.0f, size.width, size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGContextTranslateCTM(context, 0.0f, -size.height);
CGContextDrawImage(context, myRect, subImage);
UIImage* croppedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRelease(subImage);
return croppedImage;
}
UIImage *straightenAndScaleImage(UIImage *image, int maxDimension) {
CGImageRef img = [image CGImage];
CGFloat width = CGImageGetWidth(img);
CGFloat height = CGImageGetHeight(img);
CGRect bounds = CGRectMake(0, 0, width, height);
CGSize size = bounds.size;
if (width > maxDimension || height > maxDimension) {
CGFloat ratio = width/height;
if (ratio > 1.0f) {
size.width = maxDimension;
size.height = size.width / ratio;
}
else {
size.height = maxDimension;
size.width = size.height * ratio;
}
}
CGFloat scale = size.width/width;
CGAffineTransform transform = orientationTransformForImage(image, &size);
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
// Flip
UIImageOrientation orientation = [image imageOrientation];
if (orientation == UIImageOrientationRight || orientation == UIImageOrientationLeft) {
CGContextScaleCTM(context, -scale, scale);
CGContextTranslateCTM(context, -height, 0);
}else {
CGContextScaleCTM(context, scale, -scale);
CGContextTranslateCTM(context, 0, -height);
}
CGContextConcatCTM(context, transform);
CGContextDrawImage(context, bounds, img);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}