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

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

Answer 1

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];

Answer 2

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];

Answer 3

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!)

Answer 4

您可以使用两个不同的图像视图，并分配两个不同的图像。

Answer 5

//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)

Answer 6

 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();

Answer 7

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

Answer 8

#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();
}

Answer 9

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
}

Answer 10

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()
}