Create UIImage from 2 UIImages and label - ios

I got one big UIImage. Over this UIImage i got one more, witch is actually a mask. And one more - i got UILabel over this mask! Witch is text for the picture.
I want to combine all this parts in one UIImage to save it to Camera Roll!
How should I do it?
UPD. How should i add UITextView?
i found:
[[myTextView layer] renderInContext:UIGraphicsGetCurrentContext()];
But this method doesn't place myTextView on the right place.

create two UIImage objects and one UILabel objects then use drawInRect: method
//create image 1
UIImage *img1 = [UIImage imageNamed:#"image1.png"];
//create image 2
UIImage *img2 = [UIImage imageNamed:#"image2.png"];
// create label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50,50 )];
//set you label text
[label setText:#"Hello"];
// use UIGraphicsBeginImageContext() to draw them on top of each other
//start drawing
UIGraphicsBeginImageContext(img1.size);
//draw image1
[img1 drawInRect:CGRectMake(0, 0, img1.size.width, img1.size.height)];
//draw image2
[img2 drawInRect:CGRectMake((img1.size.width - img2.size.width) /2, (img1.size.height- img2.size.height)/2, img2.size.width, img2.size.height)];
//draw label
[label drawTextInRect:CGRectMake((img1.size.width - label.frame.size.width)/2, (img1.size.height - label.frame.size.height)/2, label.frame.size.width, label.frame.size.height)];
//get the final image
UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
The resultImage which is UIImage contains all of your images and labels as one image. After that you can save it where ever you want.
Hope helps...

Related

Rectangle image scale to aspect fit square to use with MPMediaItemArtwork

MPMediaItemArtwork *albumArt = [[MPMediaItemArtwork alloc] initWithImage:image]];
I have an UIImage which is rectangle, It's cropped to square when I put it to MPNowPlayingInfoCenter using MPMediaItemArtwork. How can I resize an UIImage to fit a square UIImage by width and leave the rest in blank?
put UIImage into an UIImageView, set contentMode for UIImageView is UIViewContentModeScaleAspectFit and render it back to UIImage.
+ (UIImage *)imageToSquare:(UIImage *)image byWidth:(float)width{
UIImageView *view = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, width, width)];
[view setImage:image];
view.contentMode = UIViewContentModeScaleAspectFit;
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}

How to crop square area of an image in iOS?

I need to crop and straighten a rotated square area from an UIImage and then store to a new UIImage object. The following picture will make you understand what I want to do. With the locations of point A, B and the width of the square known, how to crop the area out and make it straight? Could you please show me the example code to accomplish this in detail?
Swift or Objective-C is OK. Thanks in advance.
Use This Code For Cropping the Image
// Create the image from a png file
UIImage *image = [UIImage imageNamed:#"myImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// Get size of current image
CGSize size = [image size];
// Frame location in view to show original image
[imageView setFrame:CGRectMake(0, 0, size.width, size.height)];
[[self view] addSubview:imageView];
// Create rectangle that represents a cropped image
// from the middle of the existing image
CGRect rect = CGRectMake(size.width / 4, size.height / 4 ,
(size.width / 2), (size.height / 2));
// Create bitmap image from original image data,
// using rectangle to specify desired crop area
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *img = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
// Create and show the new image from bitmap data
imageView = [[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(0, 200, (size.width / 2), (size.height / 2))];
[[self view] addSubview:imageView];

merge 2 images into one just like instagram

I am trying to figure out to get a single image pit of 2 image views like instagram
These are the 2 images. Thanks in advance.
UIImageView *photoImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20.0f, 42.0f, 280.0f, 280.0f)];
[photoImageView setBackgroundColor:[UIColor blackColor]];
[photoImageView setImage:self.image];
[photoImageView setContentMode:UIViewContentModeScaleAspectFit];
//Add overlay
UIImage *overlayGraphic = [UIImage imageNamed:#"chiu"];
UIImageView *overlayGraphicView = [[UIImageView alloc] initWithImage:overlayGraphic];
overlayGraphicView.frame = CGRectMake(30, 100, 260, 200);
[photoImageView addSubview:overlayGraphicView];
I'm not sure you can do this directly with just a UIImageView control. I think you're going to have to get into low-level drawing routines to get this done.
Option 1 (not recommended, just trying to answer the original question):
Have you tried placing the overlay UIImageView on top of the "main" UIImageView and setting its opacity to something less than 1 (say 0.4)? It's a crude hack, but it might get you somewhere.
Option 2 (probably the better path to travel):
Create an image context and then draw your "base" and "overlay" images on it. Then you'll have a UIImage you can output and will only need 1 UIImageView. Something like this (NOTE: this is a basic outline; you will need to add a LOT of time to get exactly what you want out of it!):
UIImage *baseImage = [UIImage imageNamed:#"base"];
UIImage *overlayImage = [UIImage imageNamed:#"overlay"];
UIGraphicsBeginImageContextWithOptions(baseImage.size, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);
CGContextDrawImage(context, rect, baseImage.CGImage);
CGContextDrawImage(context, rect, overlayImage.CGImage);
UIImage *combined = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

How to cut an image into irregular shapes using objective c

Thanks to everyone. I have got solution for cutting an image into irregular shapes in java. But now i want to achieved this in iOS.
Here is my requirement:
I am using fingers to select particular part by touch and draw on an image , after completing drawing, i want to draw that part of the image. I am able to draw using touches, but how can i cut that particular part?
i know cutting an image into rectangular shape and circle but not into a particular shape.
If any one know please help me.
Draw a closed CGPath and turn it into an Image Mask. If I had more experience I'd give more details, but I've only done the graphs in a weather app. A guide should help.
Bellow is the code for corp image with selected rectangle area. But you can customized your selected area with CGPath and then corp the image.
-(IBAction) cropImage:(id) sender{
// Create rectangle that represents a cropped image
// from the middle of the existing image
float xCo,yCo;
float width=bottomCornerPoint.x-topCornerPoint.x;
float height=bottomCornerPoint.y-topCornerPoint.y;
if(width<0)
width=-width;
if(height<0)
height=-height;
if(topCornerPoint.x <bottomCornerPoint.x){
xCo=topCornerPoint.x;
}else{
xCo=bottomCornerPoint.x;
}
if(topCornerPoint.y <bottomCornerPoint.y){
yCo=topCornerPoint.y;
}else{
yCo=bottomCornerPoint.y;
}
CGRect rect = CGRectMake(xCo,yCo,width,height);
// Create bitmap image from original image data,
// using rectangle to specify desired crop area
UIImage *image = [UIImage imageNamed:#"abc.png"];
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *img = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
// Create and show the new image from bitmap data
imageView = [[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(110, 600, width, height)];
imageView.image=img;
[[self view] addSubview:imageView];
[imageView release];
}
CGSize newSize = CGSizeMake(backGroundImageView.frame.size.width, backGroundImageView.frame.size.height);
UIGraphicsBeginImageContext(newSize);
[<Drawing Imageview> drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
[backGroundImageView.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeSourceIn alpha:1.0];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Convert UITextView into an image

I have a UITextView and an UIImageView that I want to convert into a single image to share.
SaveImageView, is the ImageView, where I want to save the image of the textview.
The Textview can move it across the screen, so I decide to save their final position and give it to the SaveImageView.
First convert the UItextView in an image and save his position.
Then, I want to join two imageview, into a single image.
self.SaveTextView.frame = self.textView.frame;
UIGraphicsBeginImageContext (self.textView.bounds.size);
[self.textView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.SaveTextView.image=resultingImage;
//join two uiimageview
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
[self.BaseImageView.image drawInRect:CGRectMake(0, 0, self.BaseImageView.frame.size.width, self.BaseImageView.frame.size.height)];
[self.SaveTextView.image drawInRect:CGRectMake(self.SaveTextView.frame.origin.x, self.SaveTextView.frame.origin.y, self.SaveTextView.frame.size.width, self.SaveTextView.frame.size.height)];
_SaveImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
The problem is that the place where I write in the textview is not in the same position of the saved image, the image with the text is slightly moved, when it should be the exact spot where I have written, not find where is the error.
Any Help ??
Try implement this method and call it on superview:
#implementation UIView (ScreenShot)
- (UIImage *)screenShot
{
UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0.0);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
#end
Try this...
//Make Label
UILabel *_labelTimeOutName = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 428, 32)];
_labelTimeOutName.text = #"Your label text here";
_labelTimeOutName.minimumScaleFactor = 0.5;
_labelTimeOutName.numberOfLines = 1;
_labelTimeOutName.textColor = [UIColor whiteColor];
_labelTimeOutName.backgroundColor = [UIColor clearColor];
_labelTimeOutName.font = [UIFont fontWithName:#"TrebuchetMS-Bold" size:24];
_labelTimeOutName.textAlignment = NSTextAlignmentCenter;
//add label inside a temp View
UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 428, 32)];
tempView.backgroundColor = [UIColor clearColor];
[tempView addSubview:_labelTimeOutName];
//render image
//CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsBeginImageContextWithOptions(tempView.bounds.size, tempView.opaque, 0.0);
// The view to be rendered
[[tempView layer] renderInContext:UIGraphicsGetCurrentContext() ]; //context];
// Get the rendered image
//////////////////////////////////////////////////////////////////////
UIImage *FinalTextIamge = UIGraphicsGetImageFromCurrentImageContext();
//////////////////////////////////////////////////////////////////////
UIGraphicsEndImageContext();
Enjoy!

Resources