Mix two images together

Question

I am trying to merge two images into the final image, but unfortunately I can't find way to do this. How can I merge two photos like shown below?

This tutorial may help https://www.raywenderlich.com/69855/image-processing-in-ios-part-1-raw-bitmap-modification — Prashant Tukadiya, Apr 08 '16 at 05:32

score 2 · Answer 1 · answered Apr 08 '16 at 06:08

UIImage *image1 = [UIImage imageNamed:@"image1.jpg"];
UIImage *image2 = [UIImage imageNamed:@"image2.jpg"];

CGSize newSize = image1.size; //set new size as you want
UIGraphicsBeginImageContext( newSize );

//crop image1
CGImageRef imageRef = CGImageCreateWithImageInRect([image1 CGImage], CGRectMake(0, 0, image1.size.width/2, image1.size.height));
image1 = [UIImage imageWithCGImage:imageRef scale:image1.scale orientation:image1.imageOrientation];
CGImageRelease(imageRef);


//crop image2
imageRef = CGImageCreateWithImageInRect([image2 CGImage], CGRectMake(0, 0, image2.size.width/2, image2.size.height));
image2 = [UIImage imageWithCGImage:imageRef scale:image2.scale orientation:image2.imageOrientation];
CGImageRelease(imageRef);

//combine both images
// Use existing opacity as is
[image1 drawInRect:CGRectMake(0, 0, newSize.width/2, newSize.height)];

// Apply supplied opacity if applicable
[image2 drawInRect:CGRectMake(newSize.width/2, 0, newSize.width/2, newSize.height) blendMode:kCGBlendModeNormal alpha:1];

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

NSString *strPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, true) objectAtIndex:0];
strPath = [strPath stringByAppendingPathComponent:@"img.png"];
NSError *error = nil;
[[NSFileManager defaultManager] removeItemAtPath:strPath error:&error];

NSData *imgdata = UIImagePNGRepresentation(newImage);
[imgdata writeToFile:strPath atomically:false];
NSLog(@"Path = %@",strPath); //on this path image will be stored

This obviously does not render the gradient transition between the two images, but rather is a hard transition. — Rob, Apr 09 '16 at 23:36

score 2 · Answer 2 · answered Apr 08 '16 at 14:44

2

Even simpler, you could use a CISwipeTransition and set inputTime to 0.5,

Simon

answered Apr 08 '16 at 14:44

Flex Monkey

3,583
17
19

How can i do with CISwipeTransition? do you have any example? – Sagar Vaholiya Apr 09 '16 at 05:20
A swipe transition accepts two images - `inputImage` and `inputTargetImage`. It's primarily designed for transitioning between images in apps such as a slide show, but by setting the `inputTime` to 0.5, it gives a split screen view of the two images. I don't speak ObjC, I'm afraid, but I do have a Swift demo app for exploring CI transitions: https://github.com/FlexMonkey/CoreImageTransitionExplorer – Flex Monkey Apr 09 '16 at 06:21
That's right. But i need to only adjust mix gradient between images, i don't need transition. after it i have to draw these two images into one image. – Sagar Vaholiya Apr 11 '16 at 05:17

score 1 · Answer 3 · answered Apr 09 '16 at 23:31

If you want to use Core Graphics, you can create a gradient mask, draw the first image, apply the gradient as clipping mask, and then draw the second image. Thus the first image is unclipped and the second one is clipped to the gradient:

- (UIImage *)imageCombiningImage:(UIImage *)image1 withImage:(UIImage *)image2 {
    CGRect rect = CGRectMake(0, 0, image1.size.width, image1.size.height);

    UIGraphicsBeginImageContextWithOptions(image1.size, TRUE, image1.scale);

    // create gradient

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    CGFloat locations[] = { 0.45, 0.55 };  // gradient goes from 45% to 55% the way across the image
    CGFloat components[] = {
        1.0, 1.0, 1.0, 1.0,                // Start color ... white
        0.0, 0.0, 0.0, 0.0                 // End color   ... clear
    };

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);

    // create mask from that gradient

    CGContextRef context = UIGraphicsGetCurrentContext();        
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(image1.size.width, 0), kCGGradientDrawsAfterEndLocation);
    CGImageRef gradientImageRef = CGBitmapContextCreateImage(context);

    // draw the first image

    [image1 drawInRect:rect];

    // clip subsequent drawing to the gradient mask we just created

    CGContextClipToMask(context, rect, gradientImageRef);

    // draw the second image

    [image2 drawInRect:rect];

    // extract the image

    UIImage *combinedImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    // clean up

    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
    CGImageRelease(gradientImageRef);

    return combinedImage;
}

That results in:

score 0 · Answer 4 · edited May 23 '17 at 12:24

_View1.frame = CGRectMake(0, 0, Width/2, Width);
_View2.frame = CGRectMake(0, 0, Width/2, Width);

    CAGradientLayer *gradientMask = [CAGradientLayer layer];
    gradientMask.frame = self.View2.bounds;
    gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
                            (id)[UIColor clearColor].CGColor];
    gradientMask.startPoint = CGPointMake(0.5, 0.5);   // start at left middle
    gradientMask.endPoint = CGPointMake(0, 0.5);     // end at right middle
    self.View2.layer.mask = gradientMask;

=> I got help from this answer.

Mix two images together

4 Answers4