Share your Image Proccessing (filter) code

[afastrunner]

Would anyone out there be willing to share there implemention of some image proccessing code.

If you could include all 3 important steps that would be amazing

1. access raw RGBA image data
2. apply any image proccessing (edge detect, greyscale, contrast) What filter isn't as important since I intend to use my own once I have a framework to work from.
3. create a new UIImage etc from the modified data

Thanks a million for any help

[Slayer5150]

There are plenty of books on the topic

[afastrunner]

Originally Posted by Slayer5150

There are plenty of books on the topic

As I said it's not about the filter implmentation. I have books on Image Proccessing. The issue is I can't seem to get it all to come togther on the iphone.

That's why I'd like the most basic example (like grayscale) so I have something to work from. I found articles on getting image data, and articles on creating images and all the pieces (though haven't seen any image proccessing code on here or elsewhere) but can't get the steps to play nicely togther.

I'd show you what I have so far but i'm at work and code is at home.

[RickMaddy]

There are several posts on this forum that answer questions 1 and 3. Spend some time searching.

[Slayer5150]

Dude, this is trivial stuff. Get a pointer to the raw image data, and then iterate trough the pixels. If you need to work on a matrix of pixels, use multiple pointers. There is nothing iPhone specific, this is easy stuff, but nobody is going to write the code for you. Go look in a book or use google, there is a massive amount of examples for image processing.

[afastrunner]

Again i'm very aware of the steps seperatly. I've done the searching i've seen the posts here such as http://www.iphonedevsdk.com/forum/ip...ge-pixels.html

I guess I should have just posted my code and let you guys find the bug. since this code should be trivial as you say and I agree I thought someone would have have a simple example that they could copy and paste so I could find out there I went wrong.

I'll post my code later.

[afastrunner]

Here is the code i've worked out for anyone else who would like to user it. if anyone sees any problems with the code please let me know.

I've included a few different basic image processing examples just comment/uncomment the one that you want to use. I haven't implemented any Matrix filters but will be working on that soon.

PHP Code:

    CGImageRef inImage = img.CGImage;        
    CGContextRef ctx;
    
        
        CFDataRef m_DataRef;
        m_DataRef = CGDataProviderCopyData(CGImageGetDataProvider(inImage));
        UInt8 * m_PixelBuf = (UInt8 *) CFDataGetBytePtr(m_DataRef);
    //    Byte tmpByte;
        int length = CFDataGetLength(m_DataRef);
        NSLog(@"len %d", length);
        
        NSLog(@"width=%d, height=%d", CGImageGetWidth( inImage ), CGImageGetHeight( inImage ));        
        NSLog(@"1=%d, 2=%d, 3=%d", CGImageGetBitsPerComponent(inImage), CGImageGetBitsPerPixel(inImage),CGImageGetBytesPerRow(inImage));
        

    //    int Contrast_transform[255];
    //    float contrast = .15;//quantifies the angle of the slope (in radians) of the contrast transform        
    //    for(int i=0;i<256;i++){
    //        if(i<(int)(128.0f+128.0f*tan(contrast))&&i>(int)(128.0f-128.0f*tan(contrast)))
    //            Contrast_transform[i]=(i-128)/tan(contrast)+128;
    //        else if(i>=(int)(128.0f+128.0f*tan(contrast)))
    //            Contrast_transform[i]=255;
    //        else
    //            Contrast_transform[i]=0;
    //    }    
        
        for (int index = 0; index < length; index += 4)
        {
        //    tmpByte = (m_PixelBuf[index + 1] + m_PixelBuf[index + 2] + m_PixelBuf[index + 3]) / 3;
        //    if (tmpByte >= 128)
        //        m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = 255;
        //    else
        //        m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = 0;
            
            m_PixelBuf[index + 1] = 255 - m_PixelBuf[index + 1];
            m_PixelBuf[index + 2] = 255 - m_PixelBuf[index + 2];
            m_PixelBuf[index + 3] =    255 - m_PixelBuf[index + 3];    
        
        //    m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = tmpByte;        
    
        //    m_PixelBuf[index + 1] = Contrast_transform[m_PixelBuf[index + 1]];
        //    m_PixelBuf[index + 2] = Contrast_transform[m_PixelBuf[index + 2]];
        //    m_PixelBuf[index + 3] = Contrast_transform[m_PixelBuf[index + 3]];
            
        }
        
    
        
        ctx = CGBitmapContextCreate(m_PixelBuf,
                                    CGImageGetWidth( inImage ),
                                    CGImageGetHeight( inImage ),
                                    8,
                                    CGImageGetBytesPerRow( inImage ),
                                    CGImageGetColorSpace( inImage ),
                                    kCGImageAlphaPremultipliedFirst );
        
        
        CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
        UIImage* rawImage = [UIImage imageWithCGImage:imageRef];
        
        CGContextRelease(ctx);
        
    image.image = rawImage; 


[cakesy]

Works great, thanks for the code.

Can anyone think of any way of optimizing this code? Something I will have to look into myself.

[rajivtec]

Hi afastrunner,

I used your code to increase/deccrese the contrast of my png image. It just makes the image black and white. i tried varying the angle of the slope of the contrast also but it makes every thing black or white. How to maintain the color components of the pixels. can you please guide me a little bit on this.

[narendar]

Hi afastrunner,

Thanks for your code.

Can you help me in adding tanning effects to a image.
I need to get the image having some time periods of tanning(some 1hrs, 30mnts, 15mnts etc).

approximate to time span of tanning I need to get the image with that effect.

Is it possible to do like that??

Thanks,
narendar

[Karplusan]

Remeber, when using CGDataProviderCopyData, you are copying bits and are responsible for releasing them with CFRelease().

In the end of afastrunner's code, there should be (or at least somewhere in the program):

CFRelease(m_DataRef);

[ykrsdn]

Originally Posted by afastrunner

Here is the code i've worked out for anyone else who would like to user it. if anyone sees any problems with the code please let me know.

I've included a few different basic image processing examples just comment/uncomment the one that you want to use. I haven't implemented any Matrix filters but will be working on that soon.

PHP Code:

    CGImageRef inImage = img.CGImage;        
    CGContextRef ctx;
    
        
        CFDataRef m_DataRef;
        m_DataRef = CGDataProviderCopyData(CGImageGetDataProvider(inImage));
        UInt8 * m_PixelBuf = (UInt8 *) CFDataGetBytePtr(m_DataRef);
    //    Byte tmpByte;
        int length = CFDataGetLength(m_DataRef);
        NSLog(@"len %d", length);
        
        NSLog(@"width=%d, height=%d", CGImageGetWidth( inImage ), CGImageGetHeight( inImage ));        
        NSLog(@"1=%d, 2=%d, 3=%d", CGImageGetBitsPerComponent(inImage), CGImageGetBitsPerPixel(inImage),CGImageGetBytesPerRow(inImage));
        

    //    int Contrast_transform[255];
    //    float contrast = .15;//quantifies the angle of the slope (in radians) of the contrast transform        
    //    for(int i=0;i<256;i++){
    //        if(i<(int)(128.0f+128.0f*tan(contrast))&&i>(int)(128.0f-128.0f*tan(contrast)))
    //            Contrast_transform[i]=(i-128)/tan(contrast)+128;
    //        else if(i>=(int)(128.0f+128.0f*tan(contrast)))
    //            Contrast_transform[i]=255;
    //        else
    //            Contrast_transform[i]=0;
    //    }    
        
        for (int index = 0; index < length; index += 4)
        {
        //    tmpByte = (m_PixelBuf[index + 1] + m_PixelBuf[index + 2] + m_PixelBuf[index + 3]) / 3;
        //    if (tmpByte >= 128)
        //        m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = 255;
        //    else
        //        m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = 0;
            
            m_PixelBuf[index + 1] = 255 - m_PixelBuf[index + 1];
            m_PixelBuf[index + 2] = 255 - m_PixelBuf[index + 2];
            m_PixelBuf[index + 3] =    255 - m_PixelBuf[index + 3];    
        
        //    m_PixelBuf[index + 1] = m_PixelBuf[index + 2] = m_PixelBuf[index + 3] = tmpByte;        
    
        //    m_PixelBuf[index + 1] = Contrast_transform[m_PixelBuf[index + 1]];
        //    m_PixelBuf[index + 2] = Contrast_transform[m_PixelBuf[index + 2]];
        //    m_PixelBuf[index + 3] = Contrast_transform[m_PixelBuf[index + 3]];
            
        }
        
    
        
        ctx = CGBitmapContextCreate(m_PixelBuf,
                                    CGImageGetWidth( inImage ),
                                    CGImageGetHeight( inImage ),
                                    8,
                                    CGImageGetBytesPerRow( inImage ),
                                    CGImageGetColorSpace( inImage ),
                                    kCGImageAlphaPremultipliedFirst );
        
        
        CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
        UIImage* rawImage = [UIImage imageWithCGImage:imageRef];
        
        CGContextRelease(ctx);
        
    image.image = rawImage; 


The code seems to be malfunctioning for me (Simulator iPhone OS 2.0), everything gets either drawn to one side or not at all.



Can anyone help, I only altered the code to load an UIImage from the simulator's photo library which was called "image", so the only edited line is :

CGImageRef inImage = img.CGImage;

Anyway, this was the most helpful piece of code so far. Most of the time, the only reply you get is "buy a book"...

[cavalleydude]

The code that afastrunner posted many months ago actually works... The contrast adjustment (which was commented out) actually works well, but suffers from too much CPU action to pixel map values like this for very large images (10Meg+).

Has anyone done anything simular, but found a faster way to filter the pixels for contrast, brightness, etc.?

[cavalleydude]

Did you create a window/level solution? I've used your code for contrast adjustment, but looking for faster window/level techniques. Any suggestions?

[Dvdkite]

Hi Guys,

I've just made a post with a code sample found on the web that allow you to modify brightness of a uiimage
http://www.iphonedevsdk.com/forum/ip...ng-opengl.html

I've posted here it for reference.

If someone could help me to modify that code in order to make it work correctly it will be awesome :-D

David

[rocotilos]

I just read this: Grayscale - Wikipedia, the free encyclopedia

and succesfully implemented the greyscale in my app.

There you go: this is the filter code part:

			for(int index=0;index<length;index+=4){
				Byte grayScale = 
				(Byte)(data[index+3]*.11  + 
					   data[index + 2] * .59  + 
					   data[index + 1] * .3); 
				
				//set the new image's pixel to the grayscale version
				data[index+1] = grayScale;
				data[index+2] = grayScale;
				data[index+3] = grayScale;
			}

Oh yeah, those .11, .59 and .3 are magic numbers. Hehe

[Dvdkite]

Hi Rocotilos,

I've also managed the grayscale with the code found on the web:

http://www.iphonedevsdk.com/forum/ip...recth-why.html


posted for reference

[rocotilos]

Your method is different. Interesting.
I did thru manipulating of the pixel by pixels.

[Dvdkite]

Originally Posted by rocotilos

Your method is different. Interesting.
I did thru manipulating of the pixel by pixels.

ahahaha... yes but it is not mine... I just find it on the web with google!!!!!!!!! :-D

[dany_dev]

Originally Posted by rocotilos

Your method is different. Interesting.
I did thru manipulating of the pixel by pixels.

i wrote this code for grayscale.

for (int index = 0; index < length; index += 4)
{
	Byte tempR = m_PixelBuf[index + 1];
	Byte tempG = m_PixelBuf[index + 2];
	Byte tempB = m_PixelBuf[index + 3];
		
	int eyeGrayScale = tempR * .3 + tempG * .59 + tempB * .11;
		
		
	m_PixelBuf[index + 1] = eyeGrayScale; 
	m_PixelBuf[index + 2] = eyeGrayScale; 
	m_PixelBuf[index + 3] = eyeGrayScale;
		
}

edit: added code tag

[rocotilos]

Ok done.

I think this is the correct brightness filter for your image. Did this from scratch.

It will go from Black to White. Oh yeah, the slider value must be -1 to +1.
Set the default to 0.

	for(int index=0;index<length;index+=4){
		// BRIGHTNESS
		
		Byte amountRed;
		Byte amountGreen;
		Byte amountBlue;
		
		if (thevalue<=0) {
			amountRed= (Byte)(data[index+1]*thevalue);
			amountGreen = (Byte)(data[index + 2]*thevalue);
			amountBlue = (Byte)(data[index+3]*thevalue);	
		} else {
			amountRed= (Byte)((255-data[index+1])*thevalue);
			amountGreen = (Byte)((255-data[index + 2])*thevalue);
			amountBlue = (Byte)((255-data[index+3])*thevalue);
			
		}

		data[index+1] = data[index+1]+amountRed;
		data[index+2] = data[index+2]+amountGreen;
		data[index+3] = data[index+3]+amountBlue;
			
    }

Oh yeah, dont forget to change the method "thevalue" typecast to float coz now we're using -1 to +1.

[dany_dev]

now i understand the problem, lol, initially i thinked that the problem was that code not working, after i uderstood that you want to make an image in grayscale .
However, good work!.

[Dvdkite]

Hi Dany,

Yes ... but I've tryed your code WITHOUT Apply the GrayScale !
So I've tryed it on UIImage taken from camera and I don't know why but it doesn't work so good for me... colours tone change (for example a photo of a pizza swith to original to blue tone)...

Hi Rocotilos,

Thank you very much for your code.. but it give me a strange colors tone modification like explained above...
I don't know If I'm doing something wrong...
I'll do some other test and let's see how it will work!

[rocotilos]

Originally Posted by Dvdkite

Hi Dany,

Yes ... but I've tryed your code WITHOUT Apply the GrayScale !
So I've tryed it on UIImage taken from camera and I don't know why but it doesn't work so good for me... colours tone change (for example a photo of a pizza swith to original to blue tone)...

Hi Rocotilos,

Thank you very much for your code.. but it give me a strange colors tone modification like explained above...
I don't know If I'm doing something wrong...
I'll do some other test and let's see how it will work!

Dvdkite, I had this happen to me too when playing around with it.
You gotta be careful of which data you change.

data[0] = ALPHA CHANNEL
data[1] = RED CHANNEL
data[2] = GREEN CHANNEL
data[3] = BLUE CHANNEL.

or

data[index] = alpha
data[index+1] = red..
data[index+2] = green..
data[index+3] = blue..


I presume you are only modifying the 0 to 2, hence the blue channel remain (no change in blue, so when u reduce others, the image become blue). make sure you selecting the correct channel to modify their values.

EDIT: I took a look at your brightness code (in the other thread), and spot the problem there:

for(int i=0;i<3;i++){
			if(data[index+i]+value<0){
				data[index+i]=0;
			}else{
				if(data[index+i]+value>255){
					data[index+i]=255;
				}else{
					data[index+i]+=value;
				}
			}
		}

You might wanna try changing that to i=1;i<4

[rocotilos]

Colorize code.. anyone have that?

I'm working on it, but if anyone else want to share first, pls do.