iOS image blending like Fused app - ios

I want to blend two UIImages as Fused App is doing:
https://itunes.apple.com/us/app/fused-double-exposure-video/id869117407?mt=8
What Fused is doing, it takes two images (foreground & background) and apply blending in such a way that background remains the same and user can move,rotate & size the foreground image. I attached two images for better understanding. I want to achieve the same behaviour in my app. I have tried all CoreImage & CoreGraphics but I could not achieve this. Help needed from all of you.
First Screen: After applying Overly blend mode.
Second Screen: Change the size of foreground image:
My Result:

You can achieve what you want by using CHTStickerView, I've used it before and it works great. CHTStickerView is a movable, resizable, rotatable UIView with one finger, which is fully customizable.
Use CHTStickerView as your foreground image and UIImageView as your background image.
So your code should look something like this:
- (void)viewDidLoad {
[super viewDidLoad];
//background
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:self.view.frame];
[backgroundImageView setImage:#"background.png"];
[self.view addSubview:backgroundImageView];
//foreground
UIImageView *foregroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 150, 150)];
[foregroundImageView setImage:[UIImage imageNamed:#"foreground.png"]];
CHTStickerView *stickerView = [[CHTStickerView alloc] initWithContentView:foregroundImageView]; //set your foreground image as content in CHTStickerView
stickerView.center = self.view.center;
stickerView.delegate = self;
[stickerView setImage:[UIImage imageNamed:#"Close"] forHandler:CHTStickerViewHandlerClose];
[stickerView setImage:[UIImage imageNamed:#"Rotate"] forHandler:CHTStickerViewHandlerRotate];
[self.view addSubview:stickerView];
}
UPDATE
Alright I downloaded the app and checked out blend. I think what the app is doing is just getting the opacity value of the foreground image with the slide bar and drawing the foreground image (opacity set) on the background image.
So to set the opacity of a UIImage check this out: How to set the opacity/alpha of a UIImage?
And to draw and image over another check this out: Draw another image on a UIImage
To summarize, what you need to do is:
1) get the position and size of the CHTStickerView after user rotated and resize
2) get the UIImage from CHTStickerView, get the opacity value from slider
3) set opacity to image and draw image on your background image
Hope this helps!

Related

iOS Image Animation

I want to show an image of glass getting filled with water in iPhone using iOS 8. I can get a white background image of glass (that shows empty glass) and water color could be light grey, for example.
Is there an option to fill background color of glass (in intervals)
so that it looks as if the glass is really getting filled with water?
Can I draw complete image (glass already filled with water) part by
part from bottom to top to show similar effect?
Any options to display/animate such an image?
With UIImageView you can do like that, create an images for each frame:
images = #[[UIImage imageNamed:#"img1.png"],
[UIImage imageNamed:#"img2.png"],
[UIImage imageNamed:#"img3.png"]];
[imageView setAnimationImages:testArray] ;
imageView.animationDuration = 0.5;
imageView.animationRepeatCount = 1;
[imageView startAnimating];
Another way is to have UIView's/UIImageView's composition, e.g. UIImageView in front, use it as mask, another one in a back, and just use simple UIView animation.
But anyway, such a animation can be done in many ways, depends on your needs and how nice this animation should be.

need a very tiny (rectangular in shape) overlay over UIImagePickerController, and then crop the image accordingly - UPDATED

In my application, i need the user to take a snap of only a 10 letter word (using overlay, which should be right in the centre of the screen of the UIImagePicker), and then in need to show him that image (only the part of the image covered by that rectangle). So, I need to crop that image according to the overlay.
Here, i have taken a picture using UIImagePickerControl. Now, i want to see the dimensions of the image that i have taken..
UIImage *imageToprocess = [info objectForKey:UIImagePickerControllerOriginalImage];
NSLog(#"image width %f", imageToprocess.size.width);
NSLog(#"image height %f", imageToprocess.size.height);
I see the following result on console.. But how is this possible. the dimensions of the image is exceeding the dimension of the iPhone screen size.. (which is 320, 568)
UsingTesseractOCR[524:60b] image width 2448.000000
2013-12-17 16:02:18.962 UsingTesseractOCR[524:60b] image height 3264.000000
Can anybody help me out here?? I have gone through several questions here, but did not understand how to do it.
Please help..
Refer this sample code for image capturing and cropping.
https://github.com/kishikawakatsumi/CropImageSample
For creating overlay, first create a custom view (of full dimensions of camera preview) and add an transparent image with just a rectangle in its background. use this view as overlay view.
myview =[[UIImageView alloc]init];
myview.frame=CGRectMake(0, 0, 320, 431);
// why 431? bcoz height = height of device - height of tabbar present in the
bottom for camera controls of picker
//for iphone 4 ,480-49
myview.backgroundColor =[UIColor clearColor];
myview.opaque = NO;
myview.image =[UIImage imageNamed:#"A45Box.png"];
myview.userInteractionEnabled =YES;
note that you create a background image appropriately (means dimensions). You can also draw rectangle programmatically but this is much easy way.
Secondly, talking about your cropping issue, you have to get your hands dirty....Try these links for help
https://github.com/iosdeveloper/ImageCropper
https://github.com/barrettj/BJImageCropper
https://github.com/ardalahmet/SSPhotoCropperViewController

Center [UIColor colorWithPatternImage]?

I couldn't find anything on how you can center the 'image' when you use (maybe you can't):
[self setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"background"]]];
Setting my [self setContentMode:UIContentModeCenter]; doesnt help.
Do I have to manually draw the image (either in drawRect or set the content of the CALayer? Which one if preferable?
I think you're on the wrong path here: you create a UIColor from a pattern (pattern already implies this is a repeating image). All in all- you can't have your pattern not repeat and centered.
If you just want simple image as background of your UIView, just add it as a subview and center it.
UIImage* img = [UIImage imageNamed:#"yourfile.png"];
UIImageView* imgView = [[UIImageView alloc]initWithImage: img];
[yourUIView addSubview: imgView];
imgView.center = CGPointMake(yourUIView.frame.size.width/2, yourUIView.frame.size.height/2);
Now - add more subviews to your "yourUIView" view and they'll show on top of the image - thus the image becoming the background.
So... no need to draw anything yourself.

iOS - can stretch a UIImageView but not a UIButton?

Behold:
//UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.png"]];
//[self addSubview:stretchTest];
UIButton *stretchTest = [UIButton buttonWithType:UIButtonTypeCustom];
[stretchTest setFrame:CGRectMake(0, 0, 400, 100)];
[stretchTest setBackgroundImage:[UIImage imageNamed:#"image.png"] forState:UIControlStateNormal];
[self addSubview:stretchTest];
stretchTest.contentStretch = CGRectMake(0.5, 0.5, 0, 0);
stretchTest.contentMode = UIViewContentModeScaleToFill;
CGRect frame = stretchTest.frame;
frame.size.height = 300;
stretchTest.frame = frame;
Using the UIImageView (commented out above), the image stretches appropriately - rounded corners maintain the correct radius, because only the center pixel of the image gets stretched.
Using the UIButton, the image gets stretched incorrectly. The corner radii are not maintained and it gets ugly.
Both UIImageView and UIButton are subclasses of UIView. Why does the button resize differently than the imageView?
You're making assumptions about the way UIButton works. It's not implemented the same way as UIImageView. UIImageView is just a view, with no subviews, and its contents is the image. UIButton is different, and the way it works is a private implementation detail.
If you're trying to stretch an image appropriately on a button, you should use -[UIImage stretchableImageWithLeftCapWidth:topCapHeight:] to get a UIImage that knows how it should be stretched. If you want to stretch just the middle pixel, you can use something like
UIImage *image = [UIImage imageNamed:#"image.png"];
image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2) topCapHeight:floorf(image.size.height/2)];
A UIButton has two types of images it can display -- a foreground image and a background image. The background image for a button is expected to replace the button's background texture. As such, it will stretch to fill the entire background. The button's foreground image is expected to be an icon that may or may not display alongside text; it will not stretch. It may shrink if the frame is smaller than the image, but it will not stretch.
A button's foreground and background image can be set in code like this:
// stretchy
[self setBackgroundImage:backgroundImage forState:UIControlStateNormal];
// not stretchy
[self setImage:forgroundImage forState:UIControlStateNormal];
By default, the backgroundImage of a button will use scaleToFill to stretch the image. If you need the image to stretch using cap insets though, you should set them on the image before assigning it to the backgroundImage, like this:
UIImage *image = [UIImage imageNamed:#"bg_image.png"];
/* This assumes your image will have a 1px column and 1px row of pixels
in the horizontal and vertical middle of the image that should be
stretchable. If that's not the case (such as asymetrical buttons)
you need to adjust the caps */
image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2)
topCapHeight:floorf(image.size.height/2)];
[self setBackgroundImage:image forState:UIControlStateNormal];

Visual artifacts on UIView rotation with tiled background image

I have an iPad app with a standard UIViewController/UIView setup - all rotations are allowed. The UIView draws some tiled image as background (the tile is 256*256 pixels):
- (void)drawRect:(CGRect)rect
{
[[UIImage imageNamed: #"Background.png"] drawAsPatternInRect: rect];
}
When I turn my iPad I can see that during the rotation the image pattern of the original orientation is scaled to fit the new orientation. Then - immediately after the animation is finished - the view redraws its background pattern with the final configuration which is unscaled. The switching from a scaled to an unscaled pattern looks a bit ugly.
Is there a way to circumvent (or hide) this strecthing of the background pattern?
Why not use a pattern image as background "color"? This automatically results in a tiled pattern and avoids any stunts with drawRect(). For example:
UIImage *backgroundTile = [UIImage imageNamed: #"Background.png"];
UIColor *backgroundPattern = [[UIColor alloc] initWithPatternImage:backgroundTile];
[myView setBackgroundColor:backgroundPattern];
[backgroundPattern release];
to put simply,
[myView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed: #"Background.png"] ] ];

Resources