Overlay an image over another image in iOS

Question

i am displaying thumbnail images from youtube in my iOS app. which upon click, will go to youtube.

I need a way of overlaying a play button onto those images. What might be the most straightforward way of doing so?

Also, the images are remotely loaded onto a table, so performance is a big consideration

if we put our overlay-image on top of thumbnail-imageview? Did you try it? I am trying the same thing and curious about your solution.. — user739711, Nov 09 '12 at 06:45

Jano · Accepted Answer · 2012-07-09T10:40:48.807

68

If you are concerned with table scrolling performance, retrieve the thumbnail and paint the play button over it.

+(UIImage*) drawImage:(UIImage*) fgImage
              inImage:(UIImage*) bgImage
              atPoint:(CGPoint)  point
{
    UIGraphicsBeginImageContextWithOptions(bgImage.size, FALSE, 0.0);
    [bgImage drawInRect:CGRectMake( 0, 0, bgImage.size.width, bgImage.size.height)];
    [fgImage drawInRect:CGRectMake( point.x, point.y, fgImage.size.width, fgImage.size.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

edited Jul 09 '12 at 10:40

answered Sep 05 '11 at 21:52

Jano

62,815
21
164
192

thanks @jano! would try this out. i am actually rather surprised that painting over an image would be efficient – meow Sep 06 '11 at 02:22
Pay attention to the 0.0 used when the context is created. Using 0.0 makes the size dependant on the scale of the main screen. – Luca Carlon May 06 '15 at 19:09
point is not required if anyone want to lay one image over another image . – Shrawan Dec 16 '16 at 06:54

score 5 · Answer 2 · answered Mar 31 '16 at 22:06

Swift 2.2 Version

  static func drawImage(image foreGroundImage:UIImage, inImage backgroundImage:UIImage, atPoint point:CGPoint) -> UIImage{
    UIGraphicsBeginImageContextWithOptions(backgroundImage.size, false, 0.0)
    backgroundImage.drawInRect(CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height))
    foreGroundImage .drawInRect(CGRectMake(point.x, point.y, foreGroundImage.size.width, foreGroundImage.size.height))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage
  }

score 4 · Answer 3 · edited Jan 10 '16 at 11:31

Here is what I did. The cameraImg is the image that I am getting from camera and the other three images are static images that I have displayed on the cameraImg. In this case, size defines, the size for the context we are going to start. The images are drawn in the rect defined by DrawInRect method. Make sure to end the context and you're done.

UIImage *cameraImg = image;

UIImage *leftImg = [UIImage imageNamed:@"apple.jpeg"];

UIImage *rightImg = [UIImage imageNamed:@"Cloud.png"];

UIImage *middleImg = [UIImage imageNamed:@"mario.jpeg"];

CGSize size = CGSizeMake(cameraImg.size.width, cameraImg.size.height);

UIGraphicsBeginImageContext(size);

[cameraImg drawInRect:CGRectMake(0, 0, self.view.window.frame.size.width, self.view.window.frame.size.height)];

[leftImg drawInRect:CGRectMake(x, y, width, height)];

[rightImg drawInRect:CGRectMake(x, y, width, height)];

[middleImg drawInRect:CGRectMake(x, y, width, height)];

UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0,finalImage.size.width, finalImage.size.height)];

imageView.image = finalImage;

[self.view addSubview:imageView];

score 2 · Answer 4 · answered May 09 '17 at 11:26

Swift 3.x

func drawImage(image foreGroundImage:UIImage, inImage backgroundImage:UIImage, atPoint point:CGPoint) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(backgroundImage.size, false, 0.0)
    backgroundImage.draw(in: CGRect.init(x: 0, y: 0, width: backgroundImage.size.width, height: backgroundImage.size.height))
    foreGroundImage.draw(in: CGRect.init(x: point.x, y: point.y, width: foreGroundImage.size.width, height: foreGroundImage.size.height))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage!
}

Overlay an image over another image in iOS

4 Answers4

Linked

Related