How to merge two UIImages?
Solution 1
Hope this may help you,
var bottomImage = UIImage(named: "bottom.png")
var topImage = UIImage(named: "top.png")
var size = CGSize(width: 300, height: 300)
UIGraphicsBeginImageContext(size)
let areaSize = CGRect(x: 0, y: 0, width: size.width, height: size.height)
bottomImage!.draw(in: areaSize)
topImage!.draw(in: areaSize, blendMode: .normal, alpha: 0.8)
var newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
All the Best :)
Solution 2
Swift 5: Extension for UIImage
extension UIImage {
func mergeWith(topImage: UIImage) -> UIImage {
let bottomImage = self
UIGraphicsBeginImageContext(size)
let areaSize = CGRect(x: 0, y: 0, width: bottomImage.size.width, height: bottomImage.size.height)
bottomImage.draw(in: areaSize)
topImage.draw(in: areaSize, blendMode: .normal, alpha: 1.0)
let mergedImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return mergedImage
}
}
Solution 3
Swift 4 UIImage
extension that enables easy image merging / overlaying.
extension UIImage {
func overlayWith(image: UIImage, posX: CGFloat, posY: CGFloat) -> UIImage {
let newWidth = size.width < posX + image.size.width ? posX + image.size.width : size.width
let newHeight = size.height < posY + image.size.height ? posY + image.size.height : size.height
let newSize = CGSize(width: newWidth, height: newHeight)
UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
draw(in: CGRect(origin: CGPoint.zero, size: size))
image.draw(in: CGRect(origin: CGPoint(x: posX, y: posY), size: image.size))
let newImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return newImage
}
}
Solution 4
This way the overlay picture will be much cleaner:
class func mergeImages(imageView: UIImageView) -> UIImage {
UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0.0)
imageView.superview!.layer.renderInContext(UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
Solution 5
Objective C version of this solution with top image re-centered logic :
-(UIImage *)getImageInclosedWithinAnotherImage
{
float innerImageSize = 20;
UIImage *finalImage;
UIImage *outerImage = [UIImage imageNamed:@"OuterImage.png"];
UIImage *innerImage = [UIImage imageNamed:@"InnerImage.png"];
CGSize outerImageSize = CGSizeMake(40, 40); // Provide custom size or size of your actual image
UIGraphicsBeginImageContext(outerImageSize);
//calculate areaSize for re-centered inner image
CGRect areSize = CGRectMake(((outerImageSize.width/2) - (innerImageSize/2)), ((outerImageSize.width/2) - (innerImageSize/2)), innerImageSize, innerImageSize);
[outerImage drawInRect:CGRectMake(0, 0, outerImageSize.width, outerImageSize.height)];
[innerImage drawInRect:areSize blendMode:kCGBlendModeNormal alpha:1.0];
finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return finalImage;
}
Luca Alberto
Updated on July 23, 2022Comments
-
Luca Alberto almost 2 years
I am trying to merge two different images and create a new one. This is the way I would like to do: I have this image (A):
It's a PNG image and I would like to merge this one with another image (B) which I took from the phone to create something like this:
I need a function who merge A with B creating C. The size must remain from the A image and the image B should auto adapt the size to fit into the polaroid (A). Is it possible to do that? Thank for your help!
UPDATE Just one thing, the image (A) is a square and the image i took is a 16:9, how can i fix that?? If i use your function the image (B) that i took become stretched!
-
Pallavi Konda over 8 yearscan you try to change the alpha value to 1.0 or 0.1.. am not sure about the value
-
Aleksander Grzyb over 8 yearsYou can use different version of
drawInRect
which is not taking blending option as argument which istopImage!.drawInRect(CGRectMake(xPosition, yPosition, topImage!.size.width, topImage!.size.height))
-
Luca Alberto over 8 yearsjust one thing, the image (A) is a square and the image i took is a 16:9, how can i fix that?? If i use your function the image (B) that i took become stretched!
-
iLearner almost 6 yearsWhomsoever has down-voted my answer, could you also take a moment and add your comment why its down-voted, so that I will also get to know what was wrong with my answer.
-
Milez over 5 years@luca-alberto, here is your solution!!
-
OwlOCR over 5 yearsThanks this is a nice one, but it does not handle negative posX or posY correctly. I'll add an answer that takes them into account.
-
Zahurafzal Mirza over 5 yearsI used this and generated a base64 string of the new image. and its resulting in a blank image. I checked it on codebeautify.org/base64-to-image-converter#. The image results in a blank white image. What i am trying to do is merge two image parallel to each other. Can someone help me out please ?
-
Ilesh P about 5 yearsProblem: I got with space on top, bottom when
UIImageView
haveFrame(10,10, width, height)
Solution: AddUIImageView
into the view so it will become theFrame(0, 0, width, height)
and Fixed the white space top and bottom.