iPhone, how does one overlay one image onto another to create a new image to save? (watermark)
Solution 1
It's pretty easy:
UIImage *backgroundImage = [UIImage imageNamed:@"image.png"];
UIImage *watermarkImage = [UIImage imageNamed:@"watermark.png"];
UIGraphicsBeginImageContext(backgroundImage.size);
[backgroundImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];
[watermarkImage drawInRect:CGRectMake(backgroundImage.size.width - watermarkImage.size.width, backgroundImage.size.height - watermarkImage.size.height, watermarkImage.size.width, watermarkImage.size.height)];
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
If you want the background and watermark to be of the same size then use this code
...
[backgroundImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];
[watermarkImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];
...
Solution 2
The solution provided by omz also works in Swift, like so:
let backgroundImage = UIImage(named: "image.png")!
let watermarkImage = UIImage(named: "watermark.png")!
UIGraphicsBeginImageContextWithOptions(backgroundImage.size, false, 0.0)
backgroundImage.draw(in: CGRect(x: 0.0, y: 0.0, width: backgroundImage.size.width, height: backgroundImage.size.height))
watermarkImage.draw(in: CGRect(x: backgroundImage.size.width - watermarkImage.size.width, y: backgroundImage.size.height - watermarkImage.size.height, width: watermarkImage.size.width, height: watermarkImage.size.height))
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
Solution 3
SWIFT 4
let backgroundImage = imageData!
let watermarkImage = #imageLiteral(resourceName: "jodi_url_icon")
UIGraphicsBeginImageContextWithOptions(backgroundImage.size, false, 0.0)
backgroundImage.draw(in: CGRect(x: 0.0, y: 0.0, width: backgroundImage.size.width, height: backgroundImage.size.height))
watermarkImage.draw(in: CGRect(x: 10, y: 10, width: watermarkImage.size.width, height: backgroundImage.size.height - 40))
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
self.imgaeView.image = result
Use result to UIImageView, tested.
Solution 4
SWIFT 5 Function:
func addWaterMark(image: UIImage) -> UIImage {
let backgroundImage = image//UIImage(named: "image.png")
let watermarkImage = UIImage(named: "waterMark.png")
UIGraphicsBeginImageContextWithOptions(backgroundImage.size, false, 0.0)
backgroundImage.draw(in: CGRect(x: 0.0, y: 0.0, width: backgroundImage.size.width, height: backgroundImage.size.height))
watermarkImage!.draw(in: CGRect(x: backgroundImage.size.width - watermarkImage!.size.width, y: backgroundImage.size.height - watermarkImage!.size.height, width: watermarkImage!.size.width, height: watermarkImage!.size.height))
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}
Solution 5
You can use this method, which is very dynamic and you can specify the starting position of the second image and total size of the image.
-(UIImage *) addImageToImage:(UIImage *)img withImage2:(UIImage *)img2 andRect:(CGRect)cropRect withImageWidth:(int) width{
CGSize size = CGSizeMake(width,40);
UIGraphicsBeginImageContext(size);
CGPoint pointImg1 = CGPointMake(0,0);
[img drawAtPoint:pointImg1];
CGPoint pointImg2 = cropRect.origin;
[img2 drawAtPoint: pointImg2];
UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
Related videos on Youtube
SolidSnake4444
Updated on May 29, 2020Comments
-
SolidSnake4444 about 4 years
Basically I want to take an image that the user chooses from their photo library and then apply a watermark, a triangle in the lower right that has the app name on it. I have the second image already made with a transparent layer in photoshop.
I tried a function, which I can't remember the exact name, but it involved CGIImages and masks. This combines the two images, but as a mask, which made the image darker where the transparent layer was and the images were not merged per se, just masked.
How would I get the watermark image to merge with another image, to make a UIImage, without displaying the images on the screen?
Thank you.
-
SolidSnake4444 almost 13 yearsWorked perfectly! You're right, that was pretty easy. Thank you very much for the help!
-
Jan Soltis over 10 yearsIt's better to use UIGraphicsBeginImageContextWithOptions instead of UIGraphicsBeginImageContext to preserve image quality on retina displays. See stackoverflow.com/questions/4334233/… for more info.
-
Jordan over 10 yearsYou sir deserve cake! This is an excellent solution. I have the same need and you have saved me a lot of time.
-
stackOverFlew over 10 yearsWhy does this not preserve retina image resolution? Any advice how to retain it?
-
stackOverFlew over 10 yearsThis is how to retain retina resolution: stackoverflow.com/questions/4334233/…
-
Jagdev Sendhav almost 9 yearsIf background image is small then watermark is showing very large. Please provide any advice.