Question

basically I am making an app that involves a user taking a photo, or selecting one already on their device, and then placing an overlay onto the image.

So, I seem to have coded everything fine, apart from one thing, after the user has selected the overlay and positioned it, when saved the size of the overlay has changed, whereas the x and y values seem correct.

And so this is the code I use to add the overlay (“image” being the users photo):

float wid = (overlay.image.size.width);
float hei = (overlay.image.size.height);

overlay.frame = CGRectMake(0, 0, wid, hei);
[image addSubview:overlay];

And this is the code used to save the resulting image:

UIGraphicsBeginImageContext(image.image.size);  

// Draw the users photo  
[image.image drawInRect:CGRectMake(0, 0, image.image.size.width, image.image.size.height)];  

// Draw the overlay  
float xx = (overlay.center.x);
float yy = (overlay.center.y);

CGRect aaFrame = overlay.frame;
float width = aaFrame.size.width;
float height = aaFrame.size.height;


[overlay.image drawInRect:CGRectMake(xx, yy, width, height)];
    UIGraphicsEndImageContext();

Any help? Thanks

Answer 1

The problem is that you are using image’s size rather than the image view’s frame size. Image seems to be much larger than its image view so when you use the image’s size the other image’s size ends up being much smaller in comparison although it is still the correct size. You can modify your snippet to this –

UIGraphicsBeginImageContext(image.frame.size);  

// Draw the users photo  
[image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];  
[overlay.image drawInRect:overlay.frame];

UIImage * resultingImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

Avoiding loss of quality

While the above method leads to loss of resolution, trying to draw the parent image in its proper resolution might have an unwanted effect on its child image i.e. if the overlay wasn’t of high resolution itself then it can end being stretchy. However you can try this code to draw it in the parent image’s resolution (untested, let me know if you’ve problems ) –

float verticalScale = image.image.size.height / image.frame.size.height;
float horizontalScale = image.image.size.width / image.frame.size.width;

CGRect overlayFrame = overlay.frame;
overlayFrame.origin.x *= horizontalScale;
overlayFrame.origin.y *= verticalScale;
overlayFrame.size.width *= horizontalScale;
overlayFrame.size.height *= verticalScale;

UIGraphicsBeginImageContext(image.image.size);  

// Draw the users photo  
[image.image drawInRect:CGRectMake(0, 0, image.image.size.width, image.image.size.height)];  
[overlay.image drawInRect:overlayFrame];

UIImage * resultingImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();