Merge Two Image on to one Image programmatically in iphone

Question

Hello I am developing the application which requires to merge two Image , My image size are 320*240 by merging both Image I want the size to be 320 * 480 . How can i do this programitically . Following are the Images

First Image Second Image

===================================================================================

enter image description here

I want to place them over one another . As i displayed two image I dont want to overlap the image , I want to cover 488 height — krish, Aug 17 '13 at 04:54

Chris Tetreault · Accepted Answer · 2013-08-16T13:21:32.800

Just tested this, create your context based on the sizes of the images you are working with and draw them on top of each other (this assumes they are the same width):

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

CGSize size = CGSizeMake(image1.size.width, image1.size.height + image2.size.height);

UIGraphicsBeginImageContext(size);

[image1 drawInRect:CGRectMake(0,0,size.width, image1.size.height)];
[image2 drawInRect:CGRectMake(0,image1.size.height,size.width, image2.size.height)];

UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

//Add image to view
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, finalImage.size.width, finalImage.size.height)];
imageView.image = finalImage;
[self.view addSubview:imageView];

Oddly, this seems to dramatically degrade quality for me. Any ideas why this might be? — Dinkman123, Jan 29 '14 at 18:53

score 15 · Answer 2 · answered Feb 17 '15 at 15:49

To avoid degrading image quality, use UIGraphicsBeginImageContextWithOptions.

If you specify a value of 0.0, the scale factor is set to the scale factor of the device’s main screen.

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

CGSize size = CGSizeMake(image1.size.width, image1.size.height + image2.size.height);

UIGraphicsBeginImageContextWithOptions(size, false, 0.0) // Use this call

[image1 drawInRect:CGRectMake(0,0,size.width, image1.size.height)];
[image2 drawInRect:CGRectMake(0,image1.size.height,size.width, image2.size.height)];

UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

//Add image to view
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, finalImage.size.width, finalImage.size.height)];
imageView.image = finalImage;
[self.view addSubview:imageView];

score 8 · Answer 3 · answered Oct 01 '15 at 07:48

Swift Version

func getMixedImg(image1: UIImage, image2: UIImage) -> UIImage {

    var size = CGSizeMake(image1.size.width, image1.size.height + image2.size.height)

    UIGraphicsBeginImageContext(size)

    image1.drawInRect(CGRectMake(0,0,size.width, image1.size.height))
    image2.drawInRect(CGRectMake(0,image1.size.height,size.width, image2.size.height))
    var finalImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return finalImage
}

You will get your image to call this function like this :

var myimage1 = UIImage(named: "image1.png")
var myimage2 = UIImage(named: "image2.png")

var finalMixedImage = getMixedImg(myimage1!, image2: myimage2!)

nice elegant code - i implemented it in Swift 3 - see below - and made a func that gets an array instead of 1,2 images.... — nurnachman, Dec 14 '16 at 16:34

James Kuang · Answer 4 · 2017-01-17T04:18:57.100

This implementation works for variadic arguments, so you can pass an unlimited number of images to merge vertically:

public static func mergeVertically(images: UIImage...) -> UIImage? {
    let maxWidth = images.reduce(0.0) { max($0, $1.size.width) }
    let totalHeight = images.reduce(0.0) { $0 + $1.size.height }

    UIGraphicsBeginImageContextWithOptions(CGSize(width: maxWidth, height: totalHeight), false, 0.0)
    defer {
        UIGraphicsEndImageContext()
    }

    let _ = images.reduce(CGFloat(0.0)) {
        $1.draw(in: CGRect(origin: CGPoint(x: 0.0, y: $0), size: $1.size))
        return $0 + $1.size.height
    }

    return UIGraphicsGetImageFromCurrentImageContext()
}

score 2 · Answer 5 · answered Aug 16 '13 at 12:42

2

you can use two different image-views one below other.and assign two different images.

answered Aug 16 '13 at 12:42

Preetam Jadakar

4,479
2
28
58

score 1 · Answer 6 · answered Dec 14 '16 at 16:32

Swift 3:

accepts an images array and returns an image of the images one on top of the other takes max sizes into consideration so it's losless

func combineTopToBottom(imagesArray:[UIImage]) -> UIImage? {
    var dimensions = CGSize(width: 0.0, height: 0.0)
    for image in imagesArray {
        dimensions.width = max(dimensions.width, image!.size.width)
        dimensions.height += max(dimensions.height, image!.size.height)
    }

    UIGraphicsBeginImageContext(dimensions)

    var lastY = CGFloat(0.0)
    for image in imagesArray {
        image?.draw(in:CGRect(x: 0, y: lastY, width: dimensions.width, height: image!.size.height))
        lastY += image!.size.height
    }

    let finalImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return finalImage
}

score 1 · Answer 7 · answered Dec 07 '17 at 20:02

//ADDED Swift 3.2 and 4.0

@IBOutlet weak var imgCamera1: UIImageView!
@IBOutlet weak var imgCamera2: UIImageView!

    let image1 = imgCamera1.image
    let image2 = imgCamera2.image

    let size = CGSize(width: image1?.size.width ?? 0.0, height: (image1?.size.height)! + (image2?.size.height)!)
    UIGraphicsBeginImageContext(size)
    image1?.draw(in: CGRect(x: 0, y: 0, width: size.width, height: image1?.size.height ?? 0.0))
    image2?.draw(in: CGRect(x: 0, y: image1?.size.height ?? 0.0, width: size.width, height: image2?.size.height ?? 0.0))

    let finalImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();


    //Add image to view
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: finalImage?.size.width ?? 0.0, height: finalImage?.size.height ?? 0.0))
    imageView.image = finalImage

    //Displaying Image
   // view.addSubview(imageView)

score 0 · Answer 8 · answered Aug 16 '13 at 12:38

 UIImage *Image1 = [[UIImage alloc] initWithData:data]; 
 UIImage *Image2 = [[UIImage alloc] initWithData:data]; 
 // Set up width height with values.
        CGSize newSize = CGSizeMake(width, height);
        UIGraphicsBeginImageContext( newSize );

        [Image1 drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];

        [Image2 drawInRect:CGRectMake(newSize.width,newSize.height,newSize.width,newSize.height*2) blendMode:kCGBlendModeNormal alpha:1.0];

        UIImage *mergedImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

score 0 · Answer 9 · answered Aug 16 '13 at 12:39

I think you must get contexts of ypur images and then marge it.

UIImage *eyes = [UIImage imageNamed:@"eyes"];
    UIGraphicsBeginImageContext(CGSizeMake(m, n));
    CGContextRef context1 = UIGraphicsGetCurrentContext(); 

    UIImage *mouth = [UIImage imageNamed:@"mouth"];
    UIGraphicsBeginImageContext(CGSizeMake(m, n));
    CGContextRef context2 = UIGraphicsGetCurrentContext();

Merge by drawing context with different bounds

score 0 · Answer 10 · edited May 16 '15 at 05:11

0

#pragma mark - merging two images
-(void)mergeimage :(UIImage*)firstImage withImage:(UIImage*)secondImage{



    CGSize size = CGSizeMake(MAX(firstImage.size.width, secondImage.size.width), MAX(firstImage.size.height, secondImage.size.height));


    UIGraphicsBeginImageContext(size);


    [firstImage drawInRect:CGRectMake(self.view.frame.origin.x,self.view.frame.origin.y,size.width/2,size.height)];


    [secondImage drawInRect:CGRectMake(self.view.frame.origin.x+(size.width/2),self.view.frame.origin.y,size.width/2,size.height)];

    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();


    UIGraphicsEndImageContext();
}

edited May 16 '15 at 05:11

Vaisakh

2,919
4
26
44

answered Apr 06 '15 at 08:29

yashwant patil

1

Could you please add more details about your solution? – abarisone Apr 06 '15 at 08:48
two image merge vertically ,any width height images you can merge. – yashwant patil Apr 06 '15 at 09:28

Merge Two Image on to one Image programmatically in iphone

10 Answers10

Linked