CODEWITHSUNDEEP
iosobjective-cimage
meow
meow

Reputation: 28174

Overlay an image over another image in iOS

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

Upvotes: 23

Views: 30777

Answers (4)

Hemang
Hemang

Reputation: 27072

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

Upvotes: 2

creative_rd
creative_rd

Reputation: 695

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
  }

Upvotes: 5

Rohit
Rohit

Reputation: 1174

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];

Upvotes: 4

Jano
Jano

Reputation: 63707

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

Upvotes: 69

Related Questions