Resize and merge 2 pictures

walden systems, objective c, geolocation, ios, CLLocationManager, desiredAccuracy, distanceFilter, startUpdatingLocation, stopUpdatingLocation, delegate, iphone, picture, screen, swipe, iphone, thread, nsthread, uitableviewcell, uitableview, initwithFName, infocellcontroller, nsdate, nsdateformatter nsstring, uuid, time, sleep, uiimage, UIGraphicsBeginImageContext, drawinrect, cgrectmake, nsuserdefaults, standarduserdefaults, setobjectforkey, objectforkey, UIControlEventTouchUpInside, resize picture, merge picture
Objective-C defines a small but powerful set of extensions to the ANSI C programming language that enables sophisticated object-oriented programming. Objective-C is the native language for Cocoa programming—it’s the language that the frameworks are written in, and the language that most applications are written in. You can also use some other languages—such as Python and Ruby—to develop programs using the Cocoa frameworks. It’s useful, though, to have at least a basic understanding of Objective-C because Apple’s documentation and code samples are typically written in terms of this language.

Sometimes you might need to resize two pictures and merge them into one to show on your iPhone or iPad app. There are many ways to accomplish this task and I would like to discuss one of the ways we are using here at Walden Systems, because we believe this is the most straightforward method to resize any given image.

Strategy to resize and merge two pictures is fairly simple:

     1   We need to determine what final destination the picture 
          you want to resize will be.
     2   We need to create a rectangle for that size.
     3   Create an empty image object based on your new size.
     4   Superimpose your existing image onto your new image object.
     5   Do the first four steps again for the second image.
     6   Create a rectangle for the merged image size.
     7   Create an empty image based on your new merged picture size.
     8   Superimpose your first picture onto your new merged imaged object.
     9   Superimpose your second picture onto your new merged image with 
          an offset equal to the width or height, depending on how you 
          plan on laying out the pictures.



Here are actual code samples:

The first thing you need to do is to set the size of the new image, add the picture giving it starting x and y coordinates and width and height, and set a new image to an UIImage object. To do so, use the following lines:

1     UIGraphicsBeginImageContext ( SOME_WIDTH, SOME_HEIGHT )
2     [YOUR_INSTANCE_IMAGE_OBJ_PTR drawInRect:CGRectMake( START_X, START_Y, SOME_WIDTH, SOME_HEIGHT)];
3     UIImage *NEW_DESTINATION_IMAGE = UIGraphicsGetImageFromCurrentImageContext();
4
5     UIGraphicsEndImageContext()

So, this is how a final code for resizing your picture will look like:

1    - (UIImage *)resizeImage:(UIImage *)orig_image convertToSize:(CGSize) new_size 
2    {
3        UIGraphicsBeginImageContext(new_size);
4        [image drawInRect:CGRectMake(0, 0, new_size.width, new_size.height)];
5        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
6        UIGraphicsEndImageContext();
7        return newImage;
8    }


You call the resizeImage method twice, once for each picture. Once that is done, you create a new method to create a new image object that is twice the size of the newly resized images. In this example, we will be laying out the two pictures one on top of the other. Next, you superimpose the first picture in the newly created object starting at coordinates 0,0 since this is the top picture. Next, you superimpose the second picture in the newly created object starting at coordinates 0, RESIZED_PICTURE_ONE_HEIGHT since we will be laying out the two pictures one on top of the other. Then you will need to set a new image to an UIImage object. Here is the code:

1   UIGraphicsBeginImageContext ( NEWLY_RESIZED_WIDTH, 
2                      ( NEWLY_RESIZED_HEIGHT * 2 ) ) ;
3   [YOUR_FIRST_IMAGE_PTR drawInRect:CGRectMake( 0, 0, 
4                          RESIZED_PICTURE_ONE_WIDTH, 
5                          RESIZED_PICTURE_ONE_HEIGHT)];
6   [YOUR_SECOND_IMAGE_PTR drawInRect:CGRectMake( 0, 
7                          RESIZED_PICTURE_ONE_HEIGHT, 
8                          RESIZED_PICTURE_TWO_WIDTH, 
9                          RESIZED_PICTURE_TWO_HEIGHT)];
10  UIImage *NEW_MERGED_IMAGE = UIGraphicsGetImageFromCurrentImageContext();  
11  UIGraphicsEndImageContext() ;

So, this is how a final code for merging your two pictures will look like:

 1 - (UIImage *)mergeImage:(UIImage *)orig_image1 (UIImage *)orig_image2 
 2 {
 3     // both images are the same size so we can use the width of any image
 4     float     width = orig_image1.size.width;
 5     // both images are the same size so we can double the height of any image
 6     float     height = orig_image1.size.height * 2 ;
 7     UIGraphicsBeginImageContext(width, height);
 8     
 9     [orig_image1 drawInRect:CGRectMake(0, 0, orig_image1.size.width, orig_image1.size.height)];
10     //  note the starting Y coordinate is the height of orig_image1
11     [orig_image2 drawInRect:CGRectMake(0, orig_image1.size.height, 
12                  orig_image2.size.width, orig_image2.size.height)];
13     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
14     UIGraphicsEndImageContext();
15     return newImage;
16 }

Once you have these two methods written, all that is left to do is to resize both images by calling the resizeImage method twice ( once for each image ) then calling the mergeImage method to join the two images. Here is the code

1     CGsize          size = ( 200,200 ) ;
2     UIImage *     pic1 = SOME_PICTURE_ONE ;
3     UIImage *     pic2 = SOME_PICTURE_TWO ;
4     UIImage *     mergedPic ;
5 
6     pic1 = [ self resizeImage : pic1 : size ) ;
7     pic2 = [ self resizeImage : pic2 : size ) ;
8     mergedPic = [ self mergeImage : pic1 : pic2 ] ;