I want to capture UIView and save as image. Here is my code
+ (UIImage *)captureView:(UIView *)view {
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0f);
[view drawViewHierarchyInRect:view.bounds afterScreenUpdates:NO];
// CGContextRef context = UIGraphicsGetCurrentContext();
// CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
// CGContextFillRect(context, view.bounds);
UIImage * snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return snapshotImage;
}
It works fine. But I get one issue: I can not change background for that image. It always gets black background.
So, how to change background?
Thanks.
The reason why you cannot change the background for a UIImage is because UIImage does not possess a background attribute. To add a background for which you can change color, you're going to have to create a custom UIView on your own for which the UIImage can be placed on top of. So for example, let's say you wanted to create a function which returns an image with a background of your choice:
- (UIImage* )setBackgroundImageByColor:(UIColor *)backgroundColor withFrame:(CGRect )rect{
// tcv - temporary colored view
UIView *tcv = [[UIView alloc] initWithFrame:rect];
[tcv setBackgroundColor:backgroundColor];
// set up a graphics context of button's size
CGRectGSize gcSize = tcv.frame.size;
UIGraphicsBeginImageContext(gcSize);
// add tcv's layer to context
[tcv.layer renderInContext:UIGraphicsGetCurrentContext()];
// create background image now
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
// [tcv release];
}
// [view drawViewHierarchyInRect:view.frame afterScreenUpdates:NO]; // comment this line
[view.layer renderInContext:UIGraphicsGetCurrentContext()]; // use this line
it gives the actual color of the view's as it is.. if your view's background color is clear color or black color, the image background color will be black color
Related
I have a UIimageview that i have a transparent rect that i can resize by drag the problem is i couldn't save the image (with the recant above)
i tried
-(UIImage *)imageWithViewOld:(UIView *)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
but it only show my UIImageview without my custom UIview
i even tried adding
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
[self.myRect.layer renderInContext:UIGraphicsGetCurrentContext()];
but in the generated image i can see the rect but above my image not inside
It sounds like you have an image view and you want to drag the transparent view over the image view and saved a cropped version of the image view. The issue with how it sounds like your code is set up, is that both of these views are siblings. The easiest solution you can do is add the transparent view as a subview to the image view and then use -drawViewHierarchyInRect:afterScreenUpdates:.
-(UIImage *)imageWithViewOld:(UIView *)view croppedTo:(CGRect)rect
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view drawViewHierarchyInRect:rect afterScreenUpdates:NO];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
I am using FSCalendar What I want to do is change the way of showing events. I want to put a coloured rectangle border around the cell with events. I did that by editing the cell background layer and worked fine, but now I realized that it is the wrong place to put my code as updating to the latest version of FSCalendar which will override my changes.
One of what I can access by the calendar delegates is to set image to the cell, So I want to create image as rectange border with the event colour.
Here is an image of what I want:
Any suggessions is appreicated.
Thanks in advance.
This method will draw a bordered rectangle. I would make it class method and put into UIImage category for convenient use.
- (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)imageSize andBorderWidth:(CGFloat)borderWidth fillWithColor:(BOOL)fillWithColor{
UIGraphicsBeginImageContext(imageSize);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, imageSize.width, imageSize.height);
if(fillWithColor) {
[color setFill];
CGContextFillRect(context, rect);
} else {
[color setStroke];
CGContextStrokeRectWithWidth(context, rect, borderWidth);
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
EDIT: Added fillWithColor parameter
You can set border for UIImageView instead of set image as rectange border
cell.imageView.layer.borderColor = [[UIColor redColor] CGColor];
cell.imageView.layer.borderWidth = 1.0f;
I have an image with white border and black color filled inside it. I want to just change the black color to another color at runtime. The user will select the color at runtime in HSB format. How can I do that? I tried CGImageCreateWithMaskingColors by taking
const float colorMasking[4]={255, 255, 255, 255};
but I am getting a nil CGImageRef everytime. Please help.
- (UIImage*) maskBlackInImage :(UIImage*) image color:(UIColor*)color
{
const CGFloat colorMasking[4] = { 222, 255, 222, 255 };
CGImageRef imageRef = CGImageCreateWithMaskingColors(image.CGImage, colorMasking);
UIImage* imageB = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return imageB;
}
I am attaching the image of bulb - Bulb with Black color filled, white border and transparent background
Update:
I was able to fill black color with another color after using the code in the accepted answer. But, I could see a little bit of color on white border. The image doesn't look that sharp. Attaching the output:
Create a category of UIImage class and add the following method
- (UIImage *)imageTintedWithColor:(UIColor *)color
{
UIImage *image;
if (color) {
// Construct new image the same size as this one.
UIGraphicsBeginImageContextWithOptions([self size], NO, 0.0); // 0.0 for scale means "scale for device's main screen".
CGRect rect = CGRectZero;
rect.size = [self size];
// tint the image
[self drawInRect:rect];
[color set];
UIRectFillUsingBlendMode(rect, kCGBlendModeScreen);
// restore alpha channel
[self drawInRect:rect blendMode:kCGBlendModeDestinationIn alpha:1.0f];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
return image;
}
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
I'm trying to combine two UI Images and make a new image called mainImage. One of the images is a solid background, backgroundImage, while the other is a curve created by a path, brushimage. For what I have right now the background image draws but the curve image won't. This first method creates an image for the curve image with a path.
- (void)drawBrezierPath:(UIBezierPath *)thePath onto:(UIImage *)image {
UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, 0.0);
[image drawAtPoint:CGPointZero];
[self.brushColor setStroke];
[thePath stroke];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
This one creates the background:
- (void)drawBackground
{
UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, 0.0);
UIBezierPath *rectpath = [UIBezierPath bezierPathWithRect:self.bounds];
[self.backgroundColor setFill];
[rectpath fill];
backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
And then they are combined using this:
- (void)drawMainImage {
UIGraphicsBeginImageContext(self.frame.size);
//[self drawBackground];
[backgroundImage drawInRect:self.frame];
[brushImage drawInRect:self.frame];
mainImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
But only the background shows up. When I comment out the line that draws the background then the line is shown but it doesn't draw when the background gets drawn. When I switch the order that the background/brushimage are drawn it doesn't make a difference the brushImage still doesn't show up.
Thanks!
you merge brushImage and BackgroundImage in third function, but you create "image" instead of "brushImage" in first function, shouldn't you set it to "brushImage" ?