How to use CGContextDrawImage?

Question

I need some help using the CGContextDrawImage. I have the following code which will create a Bitmap context and convert the pixel data to CGImageRef. Now I need to display that image using CGContextDrawImage. I'm not very clear on how I'm supposed to use that. The following is my code:

- (void)drawBufferWidth:(int)width height:(int)height pixels:(unsigned char*)pixels
    {
     const int area = width *height;
     const int componentsPerPixel = 4;
     unsigned char pixelData[area * componentsPerPixel];

     for(int i = 0; i<area; i++)
     {
          const int offset = i * componentsPerPixel;
          pixelData[offset] = pixels[0];
          pixelData[offset+1] = pixels[1];
          pixelData[offset+2] = pixels[2];
          pixelData[offset+3] = pixels[3];
     }

     const size_t BitsPerComponent = 8;
     const size_t BytesPerRow=((BitsPerComponent * width) / 8) * componentsPerPixel;
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     CGContextRef gtx = CGBitmapContextCreate(pixelData, width, height, BitsPerComponent, BytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);
     CGImageRef myimage = CGBitmapContextCreateImage(gtx);

     //What code should go here to display the image?

     CGContextRelease(gtx);
     CGImageRelease(myimage);

}

Any help or a sample piece of code would be great. Thanks in advance!

Dipen Panchasara · Accepted Answer · 2013-03-25T04:56:01.210

Create a file named : MyDrawingView.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface MyDrawingView : UIView
{
}

@end

now create a file named : MyDrawingView.m

#import "MyChartView.h"

@implementation MyDrawingView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code

        // Write your initialization code if any.

    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
- (void)drawRect:(CGRect)rect
{
    // Drawing code

    // Create Current Context To Draw
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIImage *image = [UIImage imageNamed:@"image.jpg"];
    // Draws your image at given poing
    [image drawAtPoint:CGPointMake(10, 10)];
}

// now to use it in your view

 #import "MyChartView.h"    

 MyDrawingView *drawView = [[MyDrawingView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
 [self.view addSubview:drawView];


 // whenever you want to update that view call
 [drawView setNeedsDisplay];

// its your method to process(draw) image

- (void)drawBufferWidth:(int)width height:(int)height pixels:(unsigned char*)pixels
{
    const int area = width *height;
    const int componentsPerPixel = 4;
    unsigned char pixelData[area * componentsPerPixel];

    for(int i = 0; i<area; i++)
    {
        const int offset = i * componentsPerPixel;
        pixelData[offset] = pixels[0];
        pixelData[offset+1] = pixels[1];
        pixelData[offset+2] = pixels[2];
        pixelData[offset+3] = pixels[3];
    }

    const size_t BitsPerComponent = 8;
    const size_t BytesPerRow=((BitsPerComponent * width) / 8) * componentsPerPixel;
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef gtx = CGBitmapContextCreate(pixelData, width, height, BitsPerComponent, BytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);
    CGImageRef myimage = CGBitmapContextCreateImage(gtx);

    // Convert to UIImage
    UIImage *image = [UIImage imageWithCGImage:myimage];

    // Create a rect to display
    CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);

    // Here is the Two Snnipets to draw image
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Transform image
    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // Finaly Draw your image
    CGContextDrawImage(context, imageRect, image.CGImage);

    // You can also use following to draw your image in 'drawRect' method
    //    [[UIImage imageWithCGImage:myimage] drawInRect:CGRectMake(0, 0, 145, 15)];

    CGContextRelease(gtx);
    CGImageRelease(myimage);
}

Thanks a lot for the reply! I tried out the code, nothing is getting displayed. Maybe I'm missing something. Do I need to specify the view or something? — Ereka, Mar 22 '13 at 06:45
create a custom class (subview of UIView) add it in your view programtically, then in your custom class override "- (void)drawRect:(CGRect)rect" method. and write this code there, try this.. — Dipen Panchasara, Mar 22 '13 at 09:28
If I just call the drawInRect method with the image it is enough right? I don't have to override drawRect, since I'm only displaying and not doing any kind of modifications on the image.. — Ereka, Mar 25 '13 at 04:45
to draw something you need to use drawRect method only, whether its image or any line or any object. — Dipen Panchasara, Mar 25 '13 at 04:46
I've created a custom class called forDisplay and I've associated it with my view controller in the Interface Builder. Do I need to specify anywhere in my code that drawRect method is in forDisplay.m or the compiler will automatically know it is there? — Ereka, Mar 25 '13 at 04:50
i have put an example Ereka, check it with your code. i hope you will be succeed. — Dipen Panchasara, Mar 25 '13 at 04:56
my pleasure Ereka, always welcome , feel free for any of your queries. finally its working...!!! — Dipen Panchasara, Mar 25 '13 at 05:06

score 1 · Answer 2 · answered May 31 '15 at 15:50

If there is anyone else dealing with this problem, please try inserting the following code into Ereka's code. Dipen's solution seems a little too much. Right after the comment "//What code should go here to display the image," put the following code:

CGRect myContextRect = CGRectMake (0, 0, width, height);
CGContextDrawImage (gtx, myContextRect, myimage);
CGImageRef imageRef = CGBitmapContextCreateImage(gtx);
UIImage *finalImage = [UIImage imageWithCGImage:imageRef];
UIImageView *imgView = [[UIImageView alloc] initWithImage:finalImage];
[self.view addSubview:imgView];

How to use CGContextDrawImage?

2 Answers2