So the app I'm working on lets users write text, and the app translate that text into separate UILabels (one UILabel that only contains the text, and another UILabel that is the same width as the text, but with a transparent color background). I want to combine all the uilabels with the UIImage in the background to create a new UIImage.
So far I have the following code, but it does not produce any tangible results and would love anyone's help with this problem:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(320, 416), NO, 0.0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[_imgViewFinal.layer renderInContext:ctx];
CGContextSaveGState(ctx);
for (int i = 0; i < _allLabels.count; i++) {
UILabel *tempLabelBg = [_allBgs objectAtIndex:i];
CGContextTranslateCTM(ctx, tempLabelBg.frame.origin.x, tempLabelBg.frame.origin.y);
CGContextSaveGState(ctx);
[tempLabelBg.layer renderInContext:ctx];
CGContextRestoreGState(ctx);
UILabel *tempLabelText = [_allLabels objectAtIndex:i];
[tempLabelText drawTextInRect:tempLabelText.frame];
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
NSData *imgData = UIImageJPEGRepresentation(image, 1.0);
UIImage * imagePNG = [UIImage imageWithData:imgData];
UIGraphicsEndImageContext();
*I know that drawTextInRect does not use the contextref I create. I'm not sure how to draw the text into the context. I don't think I'm using the CGContextSave and Restore properly either.
UIGraphicsBeginImageContextWithOptions(myView.bounds.size, myView.opaque, 0.0);
[myView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
where myView is the view holding whatever you want in the image (img) we're creating.. I didn't test it for Labels, but it should work fine.
Related
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.
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:
Doesn't position the image labels to their correct places and sizes
Doesn't have the background colour for the labels or main image
Doesn't have the images as Aspect Fill (like the UIImageViews) so the outside of each picture is shown as well and isn't cropped properly, like in the above example.
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!
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
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;
I'm currently coloring an existing image using a mask. For example, I have a white image with a black border and a circular mask (like the first two images). Then, I can create a third image with a color (i.e. green) which has green on the center of the original image (because the mask is present there).
The code I'm using is this (suggestions welcomed):
-(UIImage *)paintWithMask:(UIImage *)mask color:(UIColor *)color andSize:(CGSize)size{
UIImage *image = self;
UIImage *rotatedMask = [self rotateImage:mask]; //For some reason this is needed.
UIGraphicsBeginImageContextWithOptions(size, NO, image.scale);
CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height);
[image drawInRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetBlendMode(context, kCGBlendModeSourceIn);
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextClipToMask(context, rect, [rotatedMask CGImage]);
CGContextFillRect(context, rect);
UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return coloredImage;
}
What I need to do now is paint the green circle using only the mask (without the black border obviously), like this:
Any ideas? Thanks a lot!!
There is a much easier way of doing this without CoreGraphics. Simply do the following:
-(UIImageView *)imageViewWithMask:(UIImage *)mask color:(UIColor *)color andSize:(CGSize)size{
UIImage *tempImage = mask;
tempImage = [tempImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIGraphicsBeginImageContextWithOptions(size, NO,0);
[tempImage drawInRect: CGRectMake(0,0,size.width,size.height)];
tempImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *iv = [[UIImageView alloc] initWithImage: tempImage];
iv.tintColor = color;
return iv;
}
Everybody loves them some round profile images these days. So I guess I do too. With that said...
I have a UIImage set as the background image of a UIButton. What I need to do is make the profile picture completely rounded. Here's my code ... can anyone point me in the right direction?
NSString* photoUrl = [NSString stringWithFormat:#"%#%#", URL_IMAGE_BASE, photoFileName];
NSURL *myurl2 = [NSURL URLWithString: photoUrl];
UIImage *image = [UIImage imageWithData: [NSData dataWithContentsOfURL:myurl2]];
[_goToProfileEditButton setImage:image forState:UIControlStateNormal];
[_goToProfileEditButton setBackgroundImage:image forState:UIControlStateNormal];
Make the button a perfect square (same width/height) and use the cornerRadius property of the button layer and set it to be exactly half its width/height. You need to import the QuartzCore header to be able to access the layer property.
What you could do is subclass UIView and override the drawRect: method like so:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextAddEllipseInRect(context, rect);
CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
CGContextFillPath(context);
}
Set the view's clipsToBounds property to YES and add your image view as a subview of your subclassed UIView. Otherwise you could look into masking with an image via CGImageMaskCreate.
bolivia's answer is the best if you are happy to mask the button itself.
If you want to create a circle image from a square, then you can do that with a clipping mask. It should be something like as follows:
// start with the square image, from a file, the network, or wherever...
UIImage * squareImage = [UIImage imageNamed:#"squareImage.png"];
CGRect imageRect = CGRectMake(0, 0, squareImage.size.width, squareImage.size.height);
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:imageRect.size.width/2.0f];
[path addClip];
[squareImage drawInRect:imageRect];
UIImage *circleImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// now circleImage contains the circle in the center of squareImage
In my app I have a scrollview with an added subview called allView.
In the scrollview delegate methods I am applying value of the current transformation of the scrollview's subview to another view called paint view
paintView.transform = allView.transform
and save it to the disk.
The image that is created in result of that process looks different than the one on the screen. Why? How can I fix it?
View Controller
- (void)scrollViewDidScroll:(UIScrollView *)scrollView; {
self.paintView.transform =self.allView.transform;
[self.paintView setNeedsDisplay];
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
self.backgroundView.transform = self.allView.transform;
[self.paintView setNeedsDisplay];
}
Paint View
Inside the PaintView's draw rect I am trying to apply transformation from the scroll view and
- (void)drawRect:(CGRect)rect
{
// Drawing code
// Draw on the screen
CGContextRef ctx1 =UIGraphicsGetCurrentContext();
CGContextConcatCTM(ctx1, self.transform);
CGColorRef wh = [[UIColor redColor]CGColor];
CGContextSetStrokeColorWithColor(ctx1, wh);
CGContextMoveToPoint(ctx1, 0, 0);
CGContextAddLineToPoint(ctx1, 200, 200);
CGContextStrokePath(ctx1);
// Apply scroll view's transformation
CGRect r = CGRectApplyAffineTransform(rect,self.transform );
//that gives a resized image
UIGraphicsBeginImageContextWithOptions(r.size, NO, 0.0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextConcatCTM(ctx, self.transform);
// stroke and so on
CGContextSetStrokeColorWithColor(ctx, wh);
CGContextMoveToPoint(ctx, 0, 0);
CGContextAddLineToPoint(ctx, 200, 200);
CGContextStrokePath(ctx);
Getting image with entire content.
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//Clipping the image
CGImageRef cgImg = CGImageCreateWithImageInRect(image.CGImage, rect);
UIImage *img = [UIImage imageWithCGImage:cgImg];
NSData * d = UIImageJPEGRepresentation(img, 0.8);
//saving the image (for debugging)
[self save:d];
UIGraphicsEndImageContext();
}
iOS Simulator
Image saved to the disk
It may be a little bit hard to diagnose the problem here without being able to have running code. However, I think the problem may be on these lines where you are clipping the image:
// Clipping the image
CGImageRef cgImg = CGImageCreateWithImageInRect(image.CGImage, rect);
UIImage *img = [UIImage imageWithCGImage:cgImg];
I think you actually just want to get the scroll view's visible rect, which would be scrollView.frame rather than the subview that fills the scroll view's entire contentSize. So, using some way (such as a property on paintView such as a visibleFrame), I would revise the lines to be something like this:
// Clipping the image
CGImageRef cgImg = CGImageCreateWithImageInRect(image.CGImage, self.visibleFrame);
UIImage *img = [UIImage imageWithCGImage:cgImg];
Hope this helps you get passed this issue!
In one class I have an array consisting of five UIImages such as tiangle.png and circle.png.
In the current class I have a list of colors. After clicking to the UIImage and after clicking to one color it is possible to change the color of the current UIImage.
This will be realized by masking the image, set its color and replace the old UIImage with the new one in the selected color.
But there is something wrong in the method, which should change the color:
- (void) changeColor: (UITapGestureRecognizer*) gestureRecognizer{
UIGraphicsBeginImageContext(test.newView.image.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint loc = [gestureRecognizer locationInView:self.view];
CGContextSetFillColorWithColor(context, [[self colorOfPoint:loc]CGColor]);
CGContextTranslateCTM(context, 0, test.newView.image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGRect rect = CGRectMake(test.newView.frame.origin.x,test.newView.frame.origin.x, test.newView.image.size.width,test.newView.image.size.height);
CGContextSetBlendMode(context, kCGBlendModeColorBurn);
CGContextClipToMask(context, rect, test.newView.image.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context, kCGPathFill);
CGImageRef imgRef = CGBitmapContextCreateImage(context);
UIImage* img = [UIImage imageWithCGImage:imgRef];
CGImageRelease(imgRef);
CGContextRelease(context);
UIGraphicsEndImageContext();
test.newView.image = img;
}
The only thing what is happening is that the clicked UIImage is going to get opaque.
The imageview which is holding the UIImage is in this case not deleted.
I'm not sure that grabbing an imageRef using a CGBitmapContextCreateImage() call is appropriate inside a UIGraphics image context. Every example I've ever seen uses
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
to grab the image before closing the image context. You might try that.