user3685566
user3685566

Reputation: 27

Combining Multiple UI Images and UI Labels into 1 Image

Basically I have a main UIImage, which acts as a background/border. Within that UIImage I have 2 more UIImages, vertically split with a gap around them so you can still see a border of the main background UIImage. On each side I have a UILabel, to describe the images. Below is a picture of what I mean to help put into context.

enter image description here

What I want to achieve is to make this into 1 image, but keeping all of the current positions, layouts, image layouts (Aspect Fill) and label sizes and label background colours the same. I also want this image to be the same quality so it still looks good.

I have looked at many other stackoverflow questions and have so far come up with the follow, but it has the following problems:

Below is my code so far, can anyone help me achieve it like the image above please? I am fairly new to iOS development and am struggling a bit:

-(UIImage *)renderImagesForSharing{

    CGSize newImageSize = CGSizeMake(640, 640);
    NSLog(@"CGSize %@",NSStringFromCGSize(newImageSize));

    UIGraphicsBeginImageContextWithOptions(newImageSize, NO, 0.0);

    [self.mainImage.layer renderInContext:UIGraphicsGetCurrentContext()];
    [self.beforeImageSide.image drawInRect:CGRectMake(0,0,(newImageSize.width/2),newImageSize.height)];
    [self.afterImageSize.image drawInRect:CGRectMake(320,0,(newImageSize.width/2),newImageSize.height) blendMode:kCGBlendModeNormal alpha:1.0];

    [self.beforeLabel drawTextInRect:CGRectMake(60.0f, 0.0f, 200.0f, 50.0f)];
    [self.afterLabel drawTextInRect:CGRectMake(0.0f, 0.0f, 100.0f, 50.0f)];


    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    NSData *imgData =  UIImageJPEGRepresentation(image, 0.9);
    UIImage * imagePNG = [UIImage imageWithData:imgData]; //wrap UIImage around PNG representation

    UIGraphicsEndImageContext();
    return imagePNG;
}

Thank you in advance for any help guys!

Upvotes: 0

Views: 278

Answers (2)

Rijo Payyappilly
Rijo Payyappilly

Reputation: 801

I don't understand why you want use drawInRect: to accomplish this task. Since you have the images and everything with you, you can easily create a view as you have shown in the image. Then take a screenshot of it like this:

UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, self.view.opaque, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage*theImage=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

NSData*theImageData=UIImageJPEGRepresentation(theImage, 1.0 ); //you can use PNG too
[theImageData writeToFile:@"example.jpeg" atomically:YES];

Change the self.view to the view just created

Upvotes: 2

Kittu
Kittu

Reputation: 1587

It will give some idea.

UIGraphicsBeginImageContextWithOptions(DiagnosisView.bounds.size, DiagnosisView.opaque, 0.0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor redColor] set];
CGContextFillRect(ctx, DiagnosisView.frame);
[DiagnosisView.layer renderInContext:ctx];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

NSString *imagePath = [KdiagnosisFolderPath stringByAppendingPathComponent:FileName];
NSData *pngData = UIImagePNGRepresentation(img);
[pngData writeToFile:imagePath atomically:YES];
pngData = nil,imagePath = nil;

Upvotes: 0

Related Questions