Share your Image Proccessing (filter) code

afastrunner · February 2009

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 · February 2009

There are plenty of books on the topic

afastrunner · February 2009

Slayer5150;50243 said:
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 · February 2009

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

Slayer5150 · February 2009

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 · February 2009

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/iphone-sdk-development/2159-how-get-access-image-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 · February 2009

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.

	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 · March 2009

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 · April 2009

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 · June 2009

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 · July 2009

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 · July 2009

afastrunner;51597 said:

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.

	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 · November 2009

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 · November 2009

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 · January 2010

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/iphone-sdk-development/37859-help-optimize-brightness-algorithm-method-not-using-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 · January 2010

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;
			}

:D

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

Dvdkite · January 2010

Hi Rocotilos,

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

http://www.iphonedevsdk.com/forum/iphone-sdk-development/37759-uiimage-grayscale-convertion-ok-but-image-rotate-strecth-why.html

posted for reference

rocotilos · January 2010

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

Dvdkite · January 2010

rocotilos;161214 said:
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 · January 2010

rocotilos;161214 said:
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 · January 2010

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 · January 2010

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 :D.
However, good work!.

Dvdkite · January 2010

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 · January 2010

Dvdkite;161477 said:
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 [B][COLOR=\"Red\"]i=0;i<3[/COLOR][/B];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 · January 2010

Colorize code.. anyone have that?

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

Dvdkite · January 2010

I'm also searching for a way to colorize the image...
But Actually what I need is to add a TONE to a grayscale image ...
I'll surf the web and Will post here result ...

Howdy, Stranger!

Forums

Share your Image Proccessing (filter) code

Replies