Problem when masking UIImage - iphone

I took a sample code from the following URL: how to mask an image in order to mask an image.
The code is working perfectly on the iPhone simulator but works incorrectly on iPhone 4 simulator (that's when high-res images are loaded...)
Here is my code and the mask function:
- (void)someMethod {
UIImage* image = [UIImage imageNamed:#"image.png"]; // image#2x.png is loaded for high-res device
UIImage* mask = [UIImage imageNamed:#"mask.png"]; // mask#2x.png is loaded for high-res device
UIImage* maskedImage = [self maskImage:image withMask:mask];
// ... Some code here displaying maskedImage
}
- (UIImage *)maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
UIImage* maskedImage = nil;
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
maskedImage = [UIImage imageWithCGImage:masked];
return maskedImage;
}
On the iPhone 4 simulator the image#2x.png and mask#2x.png are loaded and then the resulted maskedImage is cropped.
Any idea what am I doing wrong?

Use this method instead of above
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//UIImage *maskImage = [UIImage imageNamed:#"mask.png"];
CGImageRef maskImageRef = [maskImage CGImage];
// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
if (mainViewContentContext==NULL)
return NULL;
CGFloat ratio = 0;
ratio = maskImage.size.width/ image.size.width;
if(ratio * image.size.height < maskImage.size.height) {
ratio = maskImage.size.height/ image.size.height;
}
CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}};
CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
CGContextDrawImage(mainViewContentContext, rect2, image.CGImage);
// Create CGImageRef of the main view bitmap content, and then
// release that bitmap context
CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage *theImage = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
// return the image
return theImage;
}

My guess would be to not trust UIImage to deliver the highrez format to CGImageRefs etc. I think you will need to do it manually.

Related

Crop letter from image using Masking

What I need:
1) Choose image from library or camera
2) Write and text
3) Text is cropped with image!
Below image can clarify more on what exactly I need.
I know masking and cropping of image even I did masking with frame in emoji me app . Just I need to know how the image should be cropped according to dynamic text.
Please give your suggestions.
...
UIImage *image = [UIImage imageNamed:#"dogs.png"];
UIImage *mask = [UIImage imageNamed:#"mask.png"];
// result of the masking method
UIImage *maskedImage = [self maskImage:image withMask:mask];
...
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask);
UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef];
CGImageRelease(mask);
CGImageRelease(maskedImageRef);
// returns new image with mask applied
return maskedImage;
}
1) write a image with text with below code
UIImage *textedImage = [self imageFromText:#"Text to show"];
-(UIImage *)imageFromText:(NSString *)text
{
//set width for string to wrap.
CGSize maximumSize;
maximumSize = CGSizeMake(320, 300);
//set your text image font here
UIFont *font = [UIFont boldSystemFontOfSize:50];
CGSize strSize1 = [text sizeWithFont:font constrainedToSize:maximumSize lineBreakMode:UILineBreakModeWordWrap];
CGSize strSize =CGSizeMake(320, strSize1.height);
if (UIGraphicsBeginImageContextWithOptions != NULL)
UIGraphicsBeginImageContextWithOptions(strSize,NO,0.0);
else
UIGraphicsBeginImageContext(strSize);
//set your new text iamge frame here
CGRect newframe = CGRectMake(0, 0, 320, 400);
UIColor *color = [UIColor redColor];
[color set];
[text drawInRect:newframe
withFont:font
lineBreakMode:UILineBreakModeCharacterWrap
alignment:UITextAlignmentCenter];
UIImage *textImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return textImg;
}
2) after getting texture image apply image making with required image
UIImage *maskedImage = [self maskImage:finalImage withMask: textedImage];
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//UIImage *maskImage = [UIImage imageNamed:#"mask.png"];
CGImageRef maskImageRef = [maskImage CGImage];
// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
if (mainViewContentContext==NULL)
return NULL;
CGFloat ratio = 0;
ratio = maskImage.size.width/ image.size.width;
if(ratio * image.size.height < maskImage.size.height) {
ratio = maskImage.size.height/ image.size.height;
}
CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}};
CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
CGContextDrawImage(mainViewContentContext, rect2, image.CGImage);
// Create CGImageRef of the main view bitmap content, and then
// release that bitmap context
CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage *theImage = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
// return the image
return theImage;
}
Here is a CoreAnimation approach. You can use a CATextLayer to mask a layer with an image. It's a little more compact code wise:
// Create our text layer we want to use as a mask
CATextLayer *textLayer = [CATextLayer layer];
[textLayer setBounds:CGRectMake(0.0f, 0.0f, 300.0f, 300.0f)];
[textLayer setFont:#"Helvetica-Bold"];
[textLayer setFontSize:42.0f];
[textLayer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
[textLayer setPosition:CGPointMake(0.0f, 0.0f)];
[textLayer setWrapped:YES];
[textLayer setAlignmentMode:kCAAlignmentCenter];
[textLayer setString:#"Hello World And Something Something!!"];
// Create our image layer
CALayer *imageLayer = [CALayer layer];
[imageLayer setBounds:CGRectMake(0.0f, 0.0f, 300.0f, 300.0f)];
[imageLayer setPosition:[[self view] center]];
[imageLayer setContents:(id)[[UIImage imageNamed:#"pp"] CGImage]];
// Set the mask
[imageLayer setMask:textLayer];
// Add the layer to the view's layer tree
[[[self view] layer] addSublayer:imageLayer];
This will yield the following:
You can mess with the font face and size. CATextLayers can wrap automatically based on the size you set them to. You can also set the text alignment on the text layer to suite your needs.
NOTE: One caveat here. If you need the output as an image, this won't work because you can't render masks using renderInContext: on the layer. This method only works if you plan to just display it in a view. Outputting an image will require the CoreGraphics approach.

Image is getting stretched and blur after crop

I am having and UIImageView and there is another canvas view over the UIImageView. I want to cut the UIImageView's image according to the canvas view's frame. But after crop the image is getting stretched and blur after crop. Below are my codes.
[UIImage *images = [self captureScreenInRect1:canvas.frame];
self.imgViewCurrent.contentMode = UIViewContentModeScaleToFill;
self.imgViewCurrent.image = images;
- (UIImage *)captureScreenInRect1:(CGRect)captureFrame {
CALayer *layer;
layer = self.view.layer;enter image description here
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 1.0);
CGContextClipToRect (UIGraphicsGetCurrentContext(),captureFrame);
[layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRef imageRef = CGImageCreateWithImageInRect([screenImage CGImage], captureFrame);
UIImage *img = [UIImage imageWithCGImage:imageRef scale:0.0 orientation:UIImageOrientationUp];
CGImageRelease(imageRef);
return img;
}
change this line
self.imgViewCurrent.contentMode = UIViewContentModeScaleToFill;
to this line
self.imgViewCurrent.contentMode = UIViewContentModeScaleAspectFit
UIViewContentModeScaleToFill will basically stretches the image.
After cropping your image, you can resize your image with Custom Size. It may help you.
-(UIImage*) resizedImage:(UIImage *)inImage: (CGRect) thumbRect
{
CGImageRef imageRef = [inImage CGImage];
CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef);
// There's a wierdness with kCGImageAlphaNone and CGBitmapContextCreate
// see Supported Pixel Formats in the Quartz 2D Programming Guide
// Creating a Bitmap Graphics Context section
// only RGB 8 bit images with alpha of kCGImageAlphaNoneSkipFirst, kCGImageAlphaNoneSkipLast, kCGImageAlphaPremultipliedFirst,
// and kCGImageAlphaPremultipliedLast, with a few other oddball image kinds are supported
// The images on input here are likely to be png or jpeg files
if (alphaInfo == kCGImageAlphaNone)
alphaInfo = kCGImageAlphaNoneSkipLast;
// Build a bitmap context that's the size of the thumbRect
CGContextRef bitmap = CGBitmapContextCreate(
NULL,
thumbRect.size.width, // width
thumbRect.size.height, // height
CGImageGetBitsPerComponent(imageRef), // really needs to always be 8
4 * thumbRect.size.width, // rowbytes
CGImageGetColorSpace(imageRef),
alphaInfo
);
// Draw into the context, this scales the image
CGContextDrawImage(bitmap, thumbRect, imageRef);
// Get an image from the context and a UIImage
CGImageRef ref = CGBitmapContextCreateImage(bitmap);
UIImage* result = [UIImage imageWithCGImage:ref];
CGContextRelease(bitmap); // ok if NULL
CGImageRelease(ref);
return result;
}

iOS Capture screen, then crop and mask the result image

In my application, I want to do the following steps:
1 - Capture the screen, this part is no problem for me, I'm using the following code:
- (UIImage *)captureScreen {
UIGraphicsBeginImageContextWithOptions(self.view.frame.size, YES, 0.0f);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
2 - I cropped the image with this function
- (UIImage *)cropImage(UIImage *)image inRect:(CGRect)rect {
CGImageRef imageRef = CGImageCreateWithImageInRect(image.CGImage, rect);
UIImage *resultImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return resultImage;
}
3 - Then I mask the cropped image with a pure black and white mask
- (UIImage *)maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef maskedRef = CGImageCreateWithMask([image CGImage], mask);
UIImage *resultImage = [UIImage imageWithCGImage:maskedRef];
CGImageRelease(mask);
CGImageRelease(maskedRef);
return resultImage;
}
However, the result image I got is that outside the shape of the mask, the image is in black color instead of transparent. Can anybody help me?
This Works for me. Hope it will work for you too.
- (UIImage*) doImageMask:(UIImage *)mainImage:(UIImage*)maskImage{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGImageRef maskImageRef = [maskImage CGImage];
// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
if (mainViewContentContext == NULL){
return NULL;
}
CGFloat ratio = 0;
ratio = maskImage.size.width/ mainImage.size.width;
if(ratio * mainImage.size.height < maskImage.size.height) {
ratio = maskImage.size.height/ mainImage.size.height;
}
CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
CGRect rect2 = {{-((mainImage.size.width*ratio)-maskImage.size.width)/2 , -((mainImage.size.height*ratio)-maskImage.size.height)/2}, {mainImage.size.width*ratio, mainImage.size.height*ratio}};
CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
CGContextDrawImage(mainViewContentContext, rect2, mainImage.CGImage);
// Create CGImageRef of the main view bitmap content, and then
// release that bitmap context
CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);
UIImage *theImage = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
// return the image
return theImage;
}
I solve my problem, it is due to the alpha channel of the image to be masked. So before masking, I create another UIImage with alpha channel and continue my steps.
This is the code for creating a UIImage with alpha
- (UIImage *)imageWithAlpha {
CGImageRef imageRef = self.CGImage;
CGFloat width = CGImageGetWidth(imageRef);
CGFloat height = CGImageGetHeight(imageRef);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(nil, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
CGImageRef resultImageRef = CGBitmapContextCreateImage(context);
UIImage *resultImage = [UIImage imageWithCGImage:resultImageRef scale:self.scale orientation:self.imageOrientation];
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
CGImageRelease(resultImageRef);
return resultImage;
}

Display an Image that has to be resized in a UITableViewCell

Hi so i currently have a small image (about 100x160) as a NSData Attribute in my CoreData model.
i display all entities in a TableView. The UIImageView in a single Cell has only a size of 50x80. just dropping the image into this frame looks a bit pebbly.
what would be the best solution to display this image in my tableViewCell? resize it on-the-fly in my cellForRowAtIndexPath? probably this will lead up my tableview to become a bit laggy.
resize it on create and save it in my coredata entity (or probably on disk)?
thank you! please leave a comment if something is unclear
For that you have to crop/resize the image. Following is the code to crop the image as per the required frame.
- (void)viewDidLoad
{
[super viewDidLoad];
// do something......
UIImage *img = [UIImage imageWithData:(nsdata)]; // nsdata will be your image data as you specified.
// To crop Image
UIImage *croppedImage = [self imageByCropping:img] toRect:CGRectMake(10, 10, 50, 80)];
// To resize image
UIImage *resizedImage = [self resizeImage:img width:50 height:80];
}
Crop Image:
- (UIImage*)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect
{
CGImageRef imageRef = CGImageCreateWithImageInRect([imageToCrop CGImage], rect);
UIImage *cropped = [UIImage imageWithCGImage:imageRef];
return cropped;
}
Resize Image:
-(UIImage *)resizeImage:(UIImage *)image width:(int)width height:(int)height
{
CGImageRef imageRef = [image CGImage];
CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef);
alphaInfo = kCGImageAlphaNoneSkipLast;
CGContextRef bitmap = CGBitmapContextCreate(NULL, width, height, CGImageGetBitsPerComponent(imageRef), 4 * width, CGImageGetColorSpace(imageRef), alphaInfo);
CGContextDrawImage(bitmap, CGRectMake(0, 0, width, height), imageRef);
CGImageRef ref = CGBitmapContextCreateImage(bitmap);
UIImage *result = [UIImage imageWithCGImage:ref];
return result;
}
You can go with either of ways.

UIImage masking gives black background on the iPhone (and not in simulator)

I've got mask images w/o alpha channel, pure black and white with a black polygone on the center sourrounded by white.
I've got png's image that I'd like to mask. the png have got an alpha channel.
using the method here below : ok on simulator, but background is black on device ...
any idea to fix that ?
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
//CGImageRelease(mask);
//CGImageRelease(maskRef);
return [UIImage imageWithCGImage:masked];
}
Problem Solved :
solution is : the image to be masked MUST be created with an alpha channel.
The Alpha channel may not be created from the code.
Same here with the following code
- (UIImage*)maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
CGImageRef maskRef = maskImage.CGImage;
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);
CGImageRef sourceImage = [image CGImage];
CGImageRef imageWithAlpha = sourceImage;
//add alpha channel for images that don't have one (ie GIF, JPEG, etc...)
//this however has a computational cost
if (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone) {
imageWithAlpha = CopyImageAndAddAlphaChannel(sourceImage);
}
CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);
//const float colorMasking[6] = { 100,100, 100, 250,250, 250};
//CGImageRef maskedImageRef = CGImageCreateWithMaskingColors(temp.CGImage, colorMasking);
CGImageRelease(mask);
//release imageWithAlpha if it was created by CopyImageAndAddAlphaChannel
if (sourceImage != imageWithAlpha) {
CGImageRelease(imageWithAlpha);
}
UIImage* retImage = [UIImage imageWithCGImage:masked];
CGImageRelease(masked);
return retImage;
}
CGImageRef CopyImageAndAddAlphaChannel(CGImageRef sourceImage) {
CGImageRef retVal = NULL;
size_t width = CGImageGetWidth(sourceImage);
size_t height = CGImageGetHeight(sourceImage);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef offscreenContext = CGBitmapContextCreate(NULL, width, height,
8, 0, colorSpace, kCGImageAlphaPremultipliedFirst);
if (offscreenContext != NULL) {
CGContextDrawImage(offscreenContext, CGRectMake(0, 0, width, height), sourceImage);
retVal = CGBitmapContextCreateImage(offscreenContext);
CGContextRelease(offscreenContext);
}
CGColorSpaceRelease(colorSpace);
return retVal;
}
Works perfectly on simulator but not on iPhone device : all images are masked but with black background.