Saving two UIImages side-by-side as one combined image?

Question

Xcode 5, iOS 7

Two UIViews side-by-side - viewA and viewB. Each view contains a UIImage - imageA and imageB. Both images meet at border between the views so that they appear seamless:imageAimageB.

How can I save the two images into a single image file, side-by-side, as though they were one image?

I know I could take a screenshot, but that would lower the resolution, and would not account for portions of the images which may be off-screen (due to scaling or positioning).

This may answer my own question but the best I can think of to create a new UIImage (imageC), size it to account for imageA and imageB, then copy the images into imageC based on their relative positions.

Any easier way?

Maybe duplicated of: http://stackoverflow.com/questions/9257992/how-to-combine-merge-2-images-into-1 — Duyen-Hoa, Jun 02 '14 at 13:32
Yes, possible duplicate - I'll need to dig around a bit but I'll come back and comment/approve/close as necessary. — wayneh, Jun 02 '14 at 13:38

BlackSheep · Accepted Answer · 2014-06-02T15:42:01.273

using 2 UIImageView in you interface, after using the UIImagePicker for each, you can marge with this code:

    - (IBAction)margeSave:(id)sender{

        //here you get you two different image

        UIImage *bottomImage = self.imageViewPick.image;
        UIImage *image       = self.myImage.image;

        //here  you have to crop each image with the code below
        //using here a crop code and adjust for your Image

        // create a new size for a merged image

        CGSize newSize = CGSizeMake(640, 640);
        UIGraphicsBeginImageContext( newSize );

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

        [myImage drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:1.0];

        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        UIImageWriteToSavedPhotosAlbum(newImage, nil, nil, nil);

        //option if you are in other view when save
        //[self.navigationController popViewControllerAnimated:YES];


    }

You can integrate this code to crop a image:

in InterfaceBuilder using 2 part of image for picking with the specific size you want, for example on iPhone using 2 UIImageView W:150 H:300 total il a 300x300 and using a crop image with size.

CGRect clippedRect  = CGRectMake(self.view.frame.origin.x+91, self.view.frame.origin.y, self.view.frame.size.width-91*2, self.view.frame.size.height-220);
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], clippedRect);
UIImage *imageCrop   = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);

Hope this help you

This does help, however it is leading to a additional question - What if I only want to save a portion of the original images - perhaps the left half of each? Thanks. — wayneh, Jun 02 '14 at 14:59
Sorry - couldn't edit my comment above - to be more detailed, I'm trying to save a specific portion of each image, for example 30% of the left and 70% of the right. — wayneh, Jun 02 '14 at 15:09
Does the new "UIImage *newImage = [UIImage imageWithCGImage:imageRef];" replace the "UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();" ? — wayneh, Jun 02 '14 at 15:30
no because in this case do not merge, sorry used my old code, you have to create other instance "UIImage *imageCrop = [UIImage imageWithCGImage:imageRef];" then use in to a new image i rewrite a code is better ;) — BlackSheep, Jun 02 '14 at 15:37

score 0 · Answer 2 · edited May 23 '17 at 11:57

If you actually want to save the images as a single image to a file then look at this post here. You will need a graphics context and all that stuff. Just make sure to set their height, width, and location values appropriately to not overlap.

Otherwise if you just wanted to do this in memory, create a UIView with the dimensions of both images and add the UIImageViews to this UIView. Be sure to set their frames correctly

UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
[container addSubview:image1];
[container addSubview:image2];
image1.frame = CGRectMake(0, 0, 150, 300);
image2.frame = CGRectMake(150, 0, 150, 300);

Then just move around the container or whatever you would like to do with it.

Saving two UIImages side-by-side as one combined image?

2 Answers2

Linked