iPhone, how does one overlay one image onto another to create a new image to save? (watermark)

Question

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.

Cheerio

possible duplicate of Create a UIImage from two other UIImages on the iPhone – Unfold

Answer 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)];
...

Gambeson

Worked perfectly! You're right, that was pretty easy. Thank you very much for the help! – Cheerio

It's better to use UIGraphicsBeginImageContextWithOptions instead of UIGraphicsBeginImageContext to preserve image quality on retina displays. See #4334733 for more info. – Pneumonoultramicroscopicsilicovolcanoconiosis

You sir deserve cake! This is an excellent solution. I have the same need and you have saved me a lot of time. – Inpatient

Why does this not preserve retina image resolution? Any advice how to retain it? – Lollapalooza

This is how to retain retina resolution: #4334733 – Lollapalooza

If background image is small then watermark is showing very large. Please provide any advice. – Optics

Answer 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()

Scup

Answer 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.

Leucoderma

Answer 4

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;

}

Torpid

Answer 5

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!
    }

Michamichael