Geek Answers Handbook

How to combine two UIImages, while maintaining their position, size and proportions?

I am trying to combine two UIImage different sizes.

My UIImage A has the following size: 1287 × 1662 pixels And UIImage B has the following size: 200 × 200 pixels

I show A and B as follows UIImageView s.

UIImageView backgroundImageView size: 375 x 667 and UIImageView foregroundImageView size: 100 x 100

The user can move the foregroundImageView to any position above the backgroundImageView .

This is the merge code:
 let previewImage:UIImage? = mergeImages(img: imgBackground.image!, sizeWaterMark: CGRect.init(origin: imgForeground.frame.origin, size: CGSize.init(width: 100, height: 100)), waterMarkImage: imgForeground.image!) func mergeImages(img:UIImage, sizeWaterMark:CGRect, waterMarkImage:UIImage) -> UIImage { let size = self.imgBackground.frame.size UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale) img.draw(in: getAspectFitFrame(sizeImgView: size, sizeImage: img.size)) let frameAspect:CGRect = getAspectFitFrame(sizeImgView: sizeWaterMark.size, sizeImage: waterMarkImage.size) let frameOrig:CGRect = CGRect(x: sizeWaterMark.origin.x+frameAspect.origin.x, y: sizeWaterMark.origin.y+frameAspect.origin.y, width: frameAspect.size.width, height: frameAspect.size.height) waterMarkImage.draw(in: frameOrig, blendMode: .normal, alpha: 1) let result:UIImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return result } func getAspectFitFrame(sizeImgView:CGSize, sizeImage:CGSize) -> CGRect { let imageSize:CGSize = sizeImage let viewSize:CGSize = sizeImgView let hfactor : CGFloat = imageSize.width/viewSize.width let vfactor : CGFloat = imageSize.height/viewSize.height let factor : CGFloat = max(hfactor, vfactor) // Divide the size by the greater of the vertical or horizontal shrinkage factor let newWidth : CGFloat = imageSize.width / factor let newHeight : CGFloat = imageSize.height / factor var x:CGFloat = 0.0 var y:CGFloat = 0.0 if hfactor > vfactor { y = (sizeImgView.height - newHeight) / 2 } else { x = (sizeImgView.width - newWidth) / 2 } let newRect:CGRect = CGRect(x: x, y: y, width: newWidth, height: newHeight) return newRect }

It is actually a merger and giving me what I am looking for. But this reduces the size of the merged image. Since you can see this line in the mergeImages function.

  let size = self.imgBackground.frame.size

I want the size to be the original size of UIImage A Therefore, if I change it to this,

  let size = self.imgBackground.image!.size

This will change location B over A after the merger.

For testing, you can download and check the source code here .

What should I do to maintain the original size when it has the exact position B over A with the corresponding aspect ratio?

+1
source share
1 answer

I made static utility functions (it’s better to move them in a separate file) to make sure that they do not use the properties and methods of the ViewController instance.

In mergeImages I deleted:

 let size = self.imgBackground.frame.size

and replaced size with img.size . This is the same as using self.imgBackground.image!.size , as you described in the question.

Since the source and target image sizes are the same, there is no need to adjust the aspect, and we just replace:

 img.draw(in: getAspectFitFrame(sizeImgView: size, sizeImage: img.size))

with

 img.draw(in: CGRect(origin: CGPoint(x: 0, y: 0), size: img.size))

I also highlighted the calculation of the factor coefficient to separate the getFactor function to make the code more granular and make getAspectFitFrame return not only CGRect , but also the factor aspect (this will be useful later).

Now the utility functions look like this:

 static func mergeImages(img: UIImage, sizeWaterMark: CGRect, waterMarkImage: UIImage) -> UIImage { UIGraphicsBeginImageContextWithOptions(img.size, false, UIScreen.main.scale) img.draw(in: CGRect(origin: CGPoint(x: 0, y: 0), size: img.size)) let (frameAspect, _) = getAspectFitFrame(from: sizeWaterMark.size, to: waterMarkImage.size) let frameOrig = CGRect(x: sizeWaterMark.origin.x + frameAspect.origin.x, y: sizeWaterMark.origin.y + frameAspect.origin.y, width: frameAspect.size.width, height: frameAspect.size.height) waterMarkImage.draw(in: frameOrig, blendMode: .normal, alpha: 1) let result = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return result } static func getAspectFitFrame(from: CGSize, to: CGSize) -> (CGRect, CGFloat) { let (hfactor, vfactor, factor) = ViewController.getFactor(from: from, to: to) // Divide the size by the greater of the vertical or horizontal shrinkage factor let newWidth = to.width / factor let newHeight = to.height / factor var x: CGFloat = 0.0 var y: CGFloat = 0.0 if hfactor > vfactor { y = (from.height - newHeight) / 2 } else { x = (from.width - newWidth) / 2 } return (CGRect(x: x, y: y, width: newWidth, height: newHeight), factor) } static func getFactor(from: CGSize, to: CGSize) -> (CGFloat, CGFloat, CGFloat) { let hfactor = to.width / from.width let vfactor = to.height / from.height return (hfactor, vfactor, max(hfactor, vfactor)) }

You also need another utility function for calculating the scale and size of marked water:

 static func getScaledFrame(from: CGSize, to: CGSize, target: CGRect) -> CGRect { let (aspectFitFrame, factor) = ViewController.getAspectFitFrame(from: from, to: to) return CGRect( origin: CGPoint( x: (target.origin.x - aspectFitFrame.origin.x) * factor, y: (target.origin.y - aspectFitFrame.origin.y) * factor), size: CGSize(width: target.width * factor, height: target.height * factor) ) }

You are now ready to display the merged image:

  let previewImage = ViewController.mergeImages( img: imgBackground.image!, sizeWaterMark: ViewController.getScaledFrame(from: imgBackground.frame.size, to: imgBackground.image!.size, target: imgForeground.frame), waterMarkImage: imgForeground.image! )
+1
source

More articles:


All Articles