Rendering a CGPDFPage into a UIImage - iphone

I'm trying to render a CGPDFPage (selected from a CGPDFDocument) into a UIImage to display on a view.
I have the following code in MonoTouch which gets me part way there.
RectangleF PDFRectangle = new RectangleF(0, 0, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);
public override void ViewDidLoad ()
{
UIGraphics.BeginImageContext(new SizeF(PDFRectangle.Width, PDFRectangle.Height));
CGContext context = UIGraphics.GetCurrentContext();
context.SaveState();
CGPDFDocument pdfDoc = CGPDFDocument.FromFile("test.pdf");
CGPDFPage pdfPage = pdfDoc.GetPage(1);
context.DrawPDFPage(pdfPage);
UIImage testImage = UIGraphics.GetImageFromCurrentImageContext();
pdfDoc.Dispose();
context.RestoreState();
UIImageView imageView = new UIImageView(testImage);
UIGraphics.EndImageContext();
View.AddSubview(imageView);
}
A section of the CGPDFPage is displayed but rotated back-to-front and upside down. My question is, how do I select the full pdf page and flip it round to display correctly. I have seen a few examples using ScaleCTM and TranslateCTM but couldn't seem to get them working.
Any examples in ObjectiveC are fine, I'll take all the help I can get :)
Thanks

I haven't worked with MonoTouch. However, in objective-C you would get an image for a PDF page like this (notice the CTM transforms):
-(UIImage *)getThumbForPage:(int)page_number{
CGFloat width = 60.0;
// Get the page
CGPDFPageRef myPageRef = CGPDFDocumentGetPage(myDocumentRef, page);
// Changed this line for the line above which is a generic line
//CGPDFPageRef page = [self getPage:page_number];
CGRect pageRect = CGPDFPageGetBoxRect(page, kCGPDFMediaBox);
CGFloat pdfScale = width/pageRect.size.width;
pageRect.size = CGSizeMake(pageRect.size.width*pdfScale, pageRect.size.height*pdfScale);
pageRect.origin = CGPointZero;
UIGraphicsBeginImageContext(pageRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
// White BG
CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
CGContextFillRect(context,pageRect);
CGContextSaveGState(context);
// ***********
// Next 3 lines makes the rotations so that the page look in the right direction
// ***********
CGContextTranslateCTM(context, 0.0, pageRect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextConcatCTM(context, CGPDFPageGetDrawingTransform(page, kCGPDFMediaBox, pageRect, 0, true));
CGContextDrawPDFPage(context, page);
CGContextRestoreGState(context);
UIImage *thm = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return thm;
}

Related

missing or invalid `MediaBox' when converting PDF to UIImage

I'm trying to convert a PDF to a UIImage, but I'm getting all sorts of weird errors. I'm not doing the conversion in a drawRect method because I'm not displaying the graphics to the screen. Any ideas how I can make this work?
The code I'm trying is this:
CGPDFPageRef page = [self getPage:pageIndex];
CGRect pageRect = CGPDFPageGetBoxRect(page, kCGPDFMediaBox);
float pdfScale = 1024.0/pageRect.size.height;
pageRect.size = CGSizeMake(pageRect.size.width*pdfScale, pageRect.size.height*pdfScale);
UIGraphicsBeginImageContext(pageRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
CGContextFillRect(context,pageRect);
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0, pageRect.size.height);
CGContextScaleCTM(context, pdfScale,-pdfScale);
CGContextDrawPDFPage(context, page);
CGContextRestoreGState(context);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

White border when rendering PDF when scale > 1

I have a method that return an UIImage from a CGPDFPageRef. You can specify a width for the image.
The problem is that when pdfScale is > 1, a white border appears in the image. So the PDF is always drawn at scale 1 with a border instead of a bigger scale. Smaller scales are OK.
I've tried to change the type of PDFBox but that doesn't seems to change anything and the documentation is not really clear.
Does somebody sees the error?
- (UIImage*) PDFImageForWidth:(CGFloat) width {
CGRect pageRect = CGPDFPageGetBoxRect(page, kCGPDFCropBox);
CGFloat pdfScale = width/pageRect.size.width;
pageRect.size = CGSizeMake(pageRect.size.width*pdfScale, pageRect.size.height*pdfScale);
pageRect.origin = CGPointZero;
UIGraphicsBeginImageContext(pageRect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
CGContextFillRect(context, pageRect);
CGContextTranslateCTM(context, 0.0, pageRect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextConcatCTM(context, CGPDFPageGetDrawingTransform(page, kCGPDFCropBox, pageRect, 0, true));
CGContextDrawPDFPage(context, page);
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
The problem was that CGPDFPageGetDrawingTransform doesn't scale the PDF when scale > 1. You have to do it yourself.
Also, the method is thread safe now.
- (UIImage*) PDFImageForWidth:(CGFloat) width {
CGRect smallPageRect = CGPDFPageGetBoxRect(page, kCGPDFCropBox);
CGFloat pdfScale = width/smallPageRect.size.width;
CGRect pageRect;
pageRect.size = CGSizeMake(smallPageRect.size.width*pdfScale, smallPageRect.size.height*pdfScale);
pageRect.origin = CGPointZero;
__block CGContextRef context;
dispatch_sync(dispatch_get_main_queue(), ^{
UIGraphicsBeginImageContext(pageRect.size);
context = UIGraphicsGetCurrentContext();
});
if (context != nil) {
CGContextSetRGBFillColor(context, 1.0,1.0,1.0,1.0);
CGContextFillRect(context, pageRect);
CGContextTranslateCTM(context, 0.0, pageRect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGAffineTransform transform = CGPDFPageGetDrawingTransform(page, kCGPDFCropBox, pageRect, 0, true);
if (pdfScale > 1) {
transform = CGAffineTransformScale(transform, pdfScale, pdfScale);
transform.tx = 0;
transform.ty = 0;
}
CGContextConcatCTM(context, transform);
CGContextDrawPDFPage(context, page);
__block UIImage* image;
dispatch_sync(dispatch_get_main_queue(), ^{
image = [UIGraphicsGetImageFromCurrentImageContext() retain];
UIGraphicsEndImageContext();
});
return [image autorelease];
}
else return nil;
}
I was having the same problem and the answer before did help me in some parts but it didn't solve the whole problem.
This is the how I solved my problem.
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
NSLog(#"pdfQuartzViewViewController - drawLayer");
CGPDFDocumentRef myDocumentRef = CGPDFDocumentCreateWithURL((CFURLRef)[NSURL fileURLWithPath:self.strFilename]);
CGPDFPageRef pageReference = CGPDFDocumentGetPage(myDocumentRef, 1);
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); // White
CGContextFillRect(context, CGContextGetClipBoundingBox(context)); // Fill
CGContextTranslateCTM(context, 0.0f, layer.bounds.size.height);
// Scaling the pdf page a little big bigger than the view so we can cover the white borders on the page
CGContextScaleCTM(context, 1.0015f, -1.0015f);
CGAffineTransform pdfTransform = CGPDFPageGetDrawingTransform(pageReference, kCGPDFCropBox, layer.bounds, 0, true);
pdfTransform.tx = pdfTransform.tx - 0.25f;
pdfTransform.ty = pdfTransform.ty - 0.40f;
CGContextConcatCTM(context, pdfTransform);
CGContextDrawPDFPage(context, pageReference); // Render the PDF page into the context
CGPDFDocumentRelease(myDocumentRef);
myDocumentRef = NULL;
}
Here there is a good link where you can find more information about it. The post explains how to use all this methods.
http://iphonedevelopment.blogspot.ch/2008/10/demystifying-cgaffinetransform.html

Problem in cropping the UIImage using CGContext?

I developing the simple UIApplication in which i want to crop the UIImage (in .jpg format) with help of CGContext. The developed code till now as follows,
CGImageRef graphicOriginalImage = [originalImage.image CGImage];
UIGraphicsBeginImageContext(originalImage.image.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGBitmapContextCreateImage(graphicOriginalImage);
CGFloat fltW = originalImage.image.size.width;
CGFloat fltH = originalImage.image.size.height;
CGFloat X = round(fltW/4);
CGFloat Y =round(fltH/4);
CGFloat width = round(X + (fltW/2));
CGFloat height = round(Y + (fltH/2));
CGContextTranslateCTM(ctx, 0, image.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGRect rect = CGRectMake(X,Y ,width ,height);
CGContextDrawImage(ctx, rect, graphicOriginalImage);
croppedImage = UIGraphicsGetImageFromCurrentImageContext();
return croppedImage;
}
The above code is worked fine but it can't crop image.
The original image memory and cropped image memory i will got same(equal to original image memory).
The above code is right for cropping the image??????????????????
Here is a good way to crop an image to a CGRect:
- (UIImage*)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect
{
//create a context to do our clipping in
UIGraphicsBeginImageContext(rect.size);
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//create a rect with the size we want to crop the image to
//the X and Y here are zero so we start at the beginning of our
//newly created context
CGRect clippedRect = CGRectMake(0, 0, rect.size.width, rect.size.height);
CGContextClipToRect( currentContext, clippedRect);
//create a rect equivalent to the full size of the image
//offset the rect by the X and Y we want to start the crop
//from in order to cut off anything before them
CGRect drawRect = CGRectMake(rect.origin.x * -1,
rect.origin.y * -1,
imageToCrop.size.width,
imageToCrop.size.height);
//draw the image to our clipped context using our offset rect
CGContextDrawImage(currentContext, drawRect, imageToCrop.CGImage);
//pull the image from our cropped context
UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();
//pop the context to get back to the default
UIGraphicsEndImageContext();
//Note: this is autoreleased
return cropped;
}
Or another way:
- (UIImage *)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect
 {
CGImageRef imageRef = CGImageCreateWithImageInRect([imageToCrop CGImage], rect);
UIImage *cropped = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);

 return cropped;
}
From http://www.hive05.com/2008/11/crop-an-image-using-the-iphone-sdk/.
The context you create to draw the image has the same size that the original image. That's why they have the same size.
If you don't want to re-invent the wheel, take a look at the TouchCode project on Google Code. You will find UIImage categories that do the job (see UIImage_ThumbnailExtensions.m).

iPhone: CoreGraphics and memory management

Can someone tell me what I am doing wrong here? I use this method to flip through pages in a PDF. But something in the code seems to not be released properly because every-time I pull a PDF page that contains an image my memory footprint increases. I am fairly new to CoreGraphics, and can't for the life of me figure out where this method would leak memory.
-(UIImage *)pageAtIndex:(NSInteger)pageNumber withWidth:(CGFloat)width andHeight:(CGFloat)height {
if((pageNumber>0) && (pageNumber<=pageCount)) {
CGFloat scaleRatio; // multiplier by which the PDF Page will be scaled
UIGraphicsBeginImageContext(CGSizeMake(width, height));
CGContextRef context = UIGraphicsGetCurrentContext();
CGPDFPageRef page = CGPDFDocumentGetPage(pdf, pageNumber);
CGRect pageRect = CGPDFPageGetBoxRect(page, kCGPDFBleedBox);
//Figure out the orientation of the PDF page and set the scaleRatio accordingly
if(pageRect.size.width/pageRect.size.height < 1.0) {
scaleRatio = height/pageRect.size.height;
}
else {
scaleRatio = width/pageRect.size.width;
}
//Calculate the offset to center the image
CGFloat xOffset = 0.0;
CGFloat yOffset = height;
if(pageRect.size.width*scaleRatio<width) {
xOffset = (width/2)-(pageRect.size.width*scaleRatio/2);
}
else {
yOffset = height-((height/2)-(pageRect.size.height*scaleRatio/2));
}
CGContextTranslateCTM(context, xOffset, yOffset);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSaveGState(context);
CGAffineTransform pdfTransform = CGPDFPageGetDrawingTransform(page, kCGPDFBleedBox, CGRectMake(0, 0, pageRect.size.width, pageRect.size.height), 0, true);
pdfTransform = CGAffineTransformScale(pdfTransform, scaleRatio, scaleRatio);
CGContextConcatCTM(context, pdfTransform);
CGContextDrawPDFPage(context, page);
UIImage *tempImage = UIGraphicsGetImageFromCurrentImageContext();
CGContextRestoreGState(context);
UIGraphicsEndPDFContext();
UIGraphicsEndImageContext();
return tempImage;
}
return nil;
}
I think I resolved the problem thanks to the people on the apple core graphics mailing list. It seems that CGPDFDocument caches data between calls but never releases it. This appears to be a bug in CoreGraphics. I was told that the only real way around this is to load and unload the PDF every time I pull a page.
You probably weren't releasing something. Gotta check for things like CGPDFPageRetain(<CGPDFPageRef page>) and CGPDFPageRelease(<CGPDFPageRef page>).

UIImage color changing?

How can I change the UIImage's color through programming, any help please? If I send a UIImage, its color needs to change any help please? If I change the RGB color through bitmaphandling, it does not work.
If you only need it to look different, just use imageView.tintColor (iOS 7+). Catch is, setting tintColor doesn't do anything by default:
To make it work, use imageWithRenderingMode:
var image = UIImage(named: "stackoverflow")!
image = image.imageWithRenderingMode(.AlwaysTemplate)
let imageView = ...
imageView.tintColor = UIColor(red: 0.35, green: 0.85, blue: 0.91, alpha: 1)
imageView.image = image
And now it will work:
Link to documentation.
Performance
Setting the image after configuring the UIImageView avoids repeating expensive operations:
// Good usage
let imageView = ...
imageView.tintColor = yourTintColor
var image = UIImage(named: "stackoverflow")!
image = image.imageWithRenderingMode(.AlwaysTemplate)
imageView.image = image // Expensive
// Bad usage
var image = UIImage(named: "stackoverflow")!
image = image.imageWithRenderingMode(.AlwaysTemplate)
let imageView = ...
imageView.image = image // Expensive
imageView.frame = ... // Expensive
imageView.tintColor = yourTint // Expensive
Getting & setting the image asynchronously reduces scrolling and animation lag (especially when tinting an image inside of a UICollectionViewCell or UITableViewCell):
let imageView = cell.yourImageView
imageView.image = nil // Clear out old image
imageView.tintColor = UIColor(red: 0.35, green: 0.85, blue: 0.91, alpha: 1)
// Setting the image asynchronously reduces stuttering
// while scrolling. Remember, the image should be set as
// late as possible to avoid repeating expensive operations
// unnecessarily.
dispatch_async(dispatch_get_main_queue(), { () -> Void in
var image = UIImage(named: "stackoverflow")!
image = image.imageWithRenderingMode(.AlwaysTemplate)
imageView.image = image
})
One way to accomplish this is to desaturate your image, and add a tint on top of that image with the color you desire.
Desaturate
-(UIImage *) getImageWithUnsaturatedPixelsOfImage:(UIImage *)image {
const int RED = 1, GREEN = 2, BLUE = 3;
CGRect imageRect = CGRectMake(0, 0, image.size.width*2, image.size.height*2);
int width = imageRect.size.width, height = imageRect.size.height;
uint32_t * pixels = (uint32_t *) malloc(width*height*sizeof(uint32_t));
memset(pixels, 0, width * height * sizeof(uint32_t));
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixels, width, height, 8, width * sizeof(uint32_t), colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedLast);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), [image CGImage]);
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++) {
uint8_t * rgbaPixel = (uint8_t *) &pixels[y*width+x];
uint32_t gray = (0.3*rgbaPixel[RED]+0.59*rgbaPixel[GREEN]+0.11*rgbaPixel[BLUE]);
rgbaPixel[RED] = gray;
rgbaPixel[GREEN] = gray;
rgbaPixel[BLUE] = gray;
}
}
CGImageRef newImage = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
free(pixels);
UIImage * resultUIImage = [UIImage imageWithCGImage:newImage scale:2 orientation:0];
CGImageRelease(newImage);
return resultUIImage;
}
Overlay With Color
-(UIImage *) getImageWithTintedColor:(UIImage *)image withTint:(UIColor *)color withIntensity:(float)alpha {
CGSize size = image.size;
UIGraphicsBeginImageContextWithOptions(size, FALSE, 2);
CGContextRef context = UIGraphicsGetCurrentContext();
[image drawAtPoint:CGPointZero blendMode:kCGBlendModeNormal alpha:1.0];
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextSetBlendMode(context, kCGBlendModeOverlay);
CGContextSetAlpha(context, alpha);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(CGPointZero.x, CGPointZero.y, image.size.width, image.size.height));
UIImage * tintedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return tintedImage;
}
How-To
//For a UIImageView
yourImageView.image = [self getImageWithUnsaturatedPixelsOfImage:yourImageView.image];
yourImageView.image = [atom getImageWithTintedColor:yourImageView.image withTint:[UIColor redColor] withIntensity:0.7];
//For a UIImage
yourImage = [self getImageWithUnsaturatedPixelsOfImage:yourImage];
yourImage = [atom getImageWithTintedColor:yourImageView.image withTint:[UIColor redColor] withIntensity:0.7];
You can change the color of the tint to whatever you desire.
There's a great post about this here:
http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage
The one caveat that I have with the current code is that using it on retina images will result in a loss of the higher 'resolution' for these images. I am currently looking for a solution for this...
Check out my post (mostly just remixing code).
Edit: This code basically creates a new CGContext, draws a layer on it with the new color, and returns a new UIImage from that. I haven't gone in depth on this code in a while, but it seems to just draw a UIImage with the same shape as the original, so that's a limit (loses any detail in the image).
If you need high performance, I strongly recommend you to use GPUImage.
You may download it at https://github.com/BradLarson/GPUImage
The RGB data you are operating on is just a copy. After you finish making changes, you need to turn that data back into an image.
I first make a new bitmap:
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
ctx = CGBitmapContextCreate( malloc(dataSize), width, height,
8, // CGImageGetBitsPerComponent(cgImage),
bytesPerRow, //CGImageGetBytesPerRow(cgImage),
space,
//kCGImageAlphaNoneSkipLast | kCGBitmapByteOrder32Big );
kCGImageAlphaNoneSkipFirst | kCGBitmapByteOrder32Little);
//kCGImageAlphaPremultipliedFirst | kCGBitmapByteOrder32Little);
CGColorSpaceRelease( space );
// now draw the image into the context
CGRect rect = CGRectMake( 0, 0, CGImageGetWidth(cgImage), CGImageGetHeight(cgImage) );
CGContextDrawImage( ctx, rect, cgImage );
And get the pixels:
pixels = CGBitmapContextGetData( ctx );
Assuming that your pixel data came from pixels = CGBitmapContextGetData( ctx ); then take that context and build a new image from it:
CGImageRef newImg = CGBitmapContextCreateImage(ctx);
[[UIImage imageWithCGImage:newImg] drawInRect:rect];
CGImageRelease(newImg);
I think you can create another context with setting there context color to RGB you want to color your picture. Then draw your UIImage into that context and use that context instead of using directly your picture. This is a concept. This way you're creating offscreen buffer with a colored image. I didn't try this in cocoa, only in carbon, but i suppose it will work in the same way.
Hmmm -- isn't the order of the bytes supposed to be RGBA? You are setting them as ARGB...
try this
- (UIImage *)imageWithOverlayColor:(UIColor *)color
{
CGRect rect = CGRectMake(0.0f, 0.0f, self.size.width, self.size.height);
if (UIGraphicsBeginImageContextWithOptions) {
CGFloat imageScale = 1.0f;
if ([self respondsToSelector:#selector(scale)]) // The scale property is new with iOS4.
imageScale = self.scale;
UIGraphicsBeginImageContextWithOptions(self.size, NO, imageScale);
}
else {
UIGraphicsBeginImageContext(self.size);
}
[self drawInRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetBlendMode(context, kCGBlendModeSourceIn);
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
The great post mentioned by user576924 worked great for me:
iPhone: How to Dynamically Color a UIImage
and in swift:
extension UIImage {
func imageWithColor( color : UIColor ) -> UIImage {
// begin a new image context, to draw our colored image onto
UIGraphicsBeginImageContext(self.size)
// get a reference to that context we created
let context = UIGraphicsGetCurrentContext();
// set the fill color
color.setFill()
// translate/flip the graphics context (for transforming from CG* coords to UI* coords
CGContextTranslateCTM(context, 0, self.size.height)
CGContextScaleCTM(context, 1.0, -1.0)
// set the blend mode to color burn, and the original image
CGContextSetBlendMode(context, kCGBlendModeColor)
let rect = CGRect(origin: CGPointZero, size: self.size)
CGContextDrawImage(context, rect, self.CGImage)
// set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
CGContextClipToMask(context, rect, self.CGImage)
CGContextAddRect(context, rect)
CGContextDrawPath(context,kCGPathFill)
// generate a new UIImage from the graphics context we drew onto
let coloredImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//return the color-burned image
return coloredImg
}
}
Note that I also changed "kCGBlendModeColorBurn" to "kCGBlendModeColor" as mentioned in the post's comments section.
For me this worked:
extension UIImage {
class func image(image: UIImage, withColor color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(image.size.width, image.size.height), false, image.scale)
let context = UIGraphicsGetCurrentContext()
color.set()
CGContextTranslateCTM(context, 0, image.size.height)
CGContextScaleCTM(context, 1, -1)
let rect = CGRectMake(0, 0, image.size.width, image.size.height)
CGContextClipToMask(context, rect, image.CGImage)
CGContextFillRect(context, rect)
let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return coloredImage
}
}