Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Added UIImage Category #2

Closed
wants to merge 4 commits into from

4 participants

Cory Imdieke David Keegan Christian Beer machizhao
Cory Imdieke

Added a quick category to apply the noise filter to any UIImage - good for buttons and other UI elements where an image is used.

David Keegan
Owner

Thanks for the pull request! Maybe I'm over looking a use case but this doesn't seem to useful to me because buttons and other UI elements usually have alpha channels. A button for example usually has round edges, this code would draw noise over the entire image including the transparent part outside the rounded edge. Could you please provide an example of how you've used this, or see it being used?

This image has opacity, but the noise is drawn over the entire image bounds: http://cl.ly/image/260B2I1I3x3g
Button image used, with @2x added to the name: http://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png

I have used KGNoise in conjunction with other drawing code and my UIImage+BBlock category, but for things like buttons and other shapes I've always used [path addClip]; so the noise only draws within a shape.

Alpha masking could be added to this code, but I am not sure of the usefulness of having this in the main repo.

David Keegan
Owner

This code is also not retina aware, it would need to account for image scale like this:

Before: http://cl.ly/image/3b3S2s450D3P
After: http://cl.ly/image/290p0U3i1K0I

- (UIImage *)imageWithNoiseOpacity:(CGFloat)opacity andBlendMode:(CGBlendMode)blendMode{
    // Create a context to draw in
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL,
                                                 self.size.width * self.scale,
                                                 self.size.height * self.scale,
                                                 8, /* bits per channel */
                                                 (self.size.width * self.scale * 4), /* 4 channels per pixel * numPixels/row */
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast);
    CGColorSpaceRelease(colorSpace);

    // Flip context
    CGContextTranslateCTM(context, 0, self.size.height * self.scale);
    CGContextScaleCTM(context, self.scale, -self.scale);

    UIGraphicsPushContext(context);

    // Draw the image
    [self drawAtPoint:CGPointMake(0.0, 0.0)];

    // Noise on top
    [KGNoise drawNoiseWithOpacity:opacity andBlendMode:blendMode];

    // Create a CGImage from the context
    CGImageRef rawImage = CGBitmapContextCreateImage(context);
    UIGraphicsPopContext();
    CGContextRelease(context);

    // Create a UIImage from the CGImage
    UIImage *finishedImage = [UIImage imageWithCGImage:rawImage scale:self.scale orientation:self.imageOrientation];
    CGImageRelease(rawImage);

    return finishedImage;
}
Christian Beer

Would be useful to create a UIColor with noise as a pattern. Maybe a UIColor category would be useful, too :)

David Keegan
Owner

NS/UIColor category could be useful, added #3

Cory Imdieke

That's funny you should mention - my first intention was to make a UIColor category with the idea that you could generate a UIColor with noise and apply it as a tint to a navigation bar. I got it all working but the issue was that the tintColor property doesn't accept a UIColor from a pattern so it didn't really work, so I adapted the code for UIImage instead. The images I was testing with didn't have any alpha but I can see how that would be a problem. I'll look into that.

Many times a client will send us images for buttons and other things (backgrounds, etc) and we'd like to apply noise to it, so I figured a UIImage category might be useful for that. If you want to play around with my UIColor stuff more I can commit that too.

David Keegan
Owner

Hey @Vortec4800 I'll be merging this in but I want to make sure the library has both Mac and iPhone support so I'll need to carve out some time to get what you have running on the Mac too. Thanks for this work!

Cory Imdieke

Sounds like a good policy. I don't really do Mac development so can't help you too much with that part. :)

David Keegan kgn referenced this pull request September 21, 2012
Closed

NS/UIColor category #3

David Keegan kgn referenced this pull request from a commit November 08, 2012
David Keegan Adding color categories: #2 8859b94
Aron Cedercrantz rastersize referenced this pull request from a commit in rastersize/KGNoise December 30, 2012
Aron Cedercrantz Merge remote-tracking branch 'upstream/master'
* upstream/master:
  Adding color categories: #2
  improved the radial gradient radius code based on @marcosanson pull request
  updating screenshot
  renaming screenshot and updating readme
  moving the default image into the iOS group
  adding KGNoiseLinearGradientView and KGNoiseRadialGradientView closes #5
  adding Default-568h@2x.png
  Minor edit to readme.md
2fe5e3f
David Keegan kgn closed this pull request from a commit February 15, 2013
David Keegan Added the image noise categories to the main KGNoise file so there is…
… only one thing to add. Also implemented the image category for NSImage and added examples to the sample apps.

fix #2
d43aecf
David Keegan kgn closed this in d43aecf February 15, 2013
David Keegan
Owner

@Vortec4800 Sorry for the delay, finally got this in NSImage support and examples. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
6  Example/KGNoiseExample.xcodeproj/project.pbxproj
@@ -18,6 +18,7 @@
18 18
 		73CF1C81160069A1006D9180 /* iOSMain.m in Sources */ = {isa = PBXBuildFile; fileRef = 73CF1C7C160069A1006D9180 /* iOSMain.m */; };
19 19
 		73CF1C82160069A1006D9180 /* KGIOSAppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 73CF1C7E160069A1006D9180 /* KGIOSAppDelegate.m */; };
20 20
 		73CF1C8416006B6B006D9180 /* KGNoise.m in Sources */ = {isa = PBXBuildFile; fileRef = 73CF1C46160061B7006D9180 /* KGNoise.m */; };
  21
+		98FA88611602A22A0095CAB5 /* UIImage+KGNoise.m in Sources */ = {isa = PBXBuildFile; fileRef = 98FA88601602A22A0095CAB5 /* UIImage+KGNoise.m */; };
21 22
 /* End PBXBuildFile section */
22 23
 
23 24
 /* Begin PBXFileReference section */
@@ -38,6 +39,8 @@
38 39
 		73CF1C7C160069A1006D9180 /* iOSMain.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = iOSMain.m; sourceTree = "<group>"; };
39 40
 		73CF1C7D160069A1006D9180 /* KGIOSAppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = KGIOSAppDelegate.h; sourceTree = "<group>"; };
40 41
 		73CF1C7E160069A1006D9180 /* KGIOSAppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = KGIOSAppDelegate.m; sourceTree = "<group>"; };
  42
+		98FA885F1602A22A0095CAB5 /* UIImage+KGNoise.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "UIImage+KGNoise.h"; sourceTree = "<group>"; };
  43
+		98FA88601602A22A0095CAB5 /* UIImage+KGNoise.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "UIImage+KGNoise.m"; sourceTree = "<group>"; };
41 44
 /* End PBXFileReference section */
42 45
 
43 46
 /* Begin PBXFrameworksBuildPhase section */
@@ -67,6 +70,8 @@
67 70
 			children = (
68 71
 				73CF1C45160061B7006D9180 /* KGNoise.h */,
69 72
 				73CF1C46160061B7006D9180 /* KGNoise.m */,
  73
+				98FA885F1602A22A0095CAB5 /* UIImage+KGNoise.h */,
  74
+				98FA88601602A22A0095CAB5 /* UIImage+KGNoise.m */,
70 75
 				73CF1C3C160060C5006D9180 /* Mac Example */,
71 76
 				73CF1C7B16006936006D9180 /* iOS Example */,
72 77
 				73CF1C171600604E006D9180 /* Products */,
@@ -226,6 +231,7 @@
226 231
 				73CF1C81160069A1006D9180 /* iOSMain.m in Sources */,
227 232
 				73CF1C82160069A1006D9180 /* KGIOSAppDelegate.m in Sources */,
228 233
 				73CF1C8416006B6B006D9180 /* KGNoise.m in Sources */,
  234
+				98FA88611602A22A0095CAB5 /* UIImage+KGNoise.m in Sources */,
229 235
 			);
230 236
 			runOnlyForDeploymentPostprocessing = 0;
231 237
 		};
16  Example/UIColor+KGNoise.h
... ...
@@ -0,0 +1,16 @@
  1
+//
  2
+//  UIColor+KGNoise.h
  3
+//  KGNoiseExample
  4
+//
  5
+//  Created by Cory Imdieke on 9/14/12.
  6
+//  Copyright (c) 2012 BitSuites, LLC. All rights reserved.
  7
+//
  8
+
  9
+#import <UIKit/UIKit.h>
  10
+
  11
+@interface UIColor (KGNoise)
  12
+
  13
+- (UIColor *)colorWithNoiseOpacity:(CGFloat)opacity;
  14
+- (UIColor *)colorWithNoiseOpacity:(CGFloat)opacity andBlendMode:(CGBlendMode)blendMode;
  15
+
  16
+@end
56  Example/UIColor+KGNoise.m
... ...
@@ -0,0 +1,56 @@
  1
+//
  2
+//  UIColor+KGNoise.m
  3
+//  KGNoiseExample
  4
+//
  5
+//  Created by Cory Imdieke on 9/14/12.
  6
+//  Copyright (c) 2012 BitSuites, LLC. All rights reserved.
  7
+//
  8
+
  9
+#import "UIColor+KGNoise.h"
  10
+#import "KGNoise.h"
  11
+
  12
+@implementation UIColor (KGNoise)
  13
+
  14
+- (UIColor *)colorWithNoiseOpacity:(CGFloat)opacity{
  15
+	return [self colorWithNoiseOpacity:opacity andBlendMode:kCGBlendModeScreen];
  16
+}
  17
+
  18
+- (UIColor *)colorWithNoiseOpacity:(CGFloat)opacity andBlendMode:(CGBlendMode)blendMode{
  19
+	// Figure out our screen scale, if it's a retina display we'll make the noise at twice the resolution
  20
+	CGFloat screenScale = [[UIScreen mainScreen] scale];
  21
+	
  22
+	// Create a context to draw in	
  23
+	CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
  24
+	CGContextRef context = CGBitmapContextCreate(NULL,
  25
+												 256.0 * screenScale,
  26
+												 256.0 * screenScale,
  27
+												 8, /* bits per channel */
  28
+												 (256.0 * screenScale * 4), /* 4 channels per pixel * numPixels/row */
  29
+												 colorSpace,
  30
+												 kCGImageAlphaPremultipliedLast);
  31
+	CGColorSpaceRelease(colorSpace);
  32
+	
  33
+	UIGraphicsPushContext(context);
  34
+	
  35
+	// Fill with the color
  36
+	CGContextSetFillColorWithColor(context, [self CGColor]);
  37
+	CGContextFillRect(context, CGRectMake(0.0, 0.0, 256.0 * screenScale, 256.0 * screenScale));
  38
+	
  39
+	// Noise on top
  40
+	[KGNoise drawNoiseWithOpacity:opacity andBlendMode:blendMode];
  41
+	
  42
+	// Create a CGImage from the context
  43
+    CGImageRef rawImage = CGBitmapContextCreateImage(context);
  44
+	UIGraphicsPopContext();
  45
+    CGContextRelease(context);
  46
+    
  47
+    // Create a UIImage from the CGImage
  48
+    UIImage *finishedImage = [UIImage imageWithCGImage:rawImage];
  49
+    CGImageRelease(rawImage);
  50
+	
  51
+	UIColor *patternColor = [UIColor colorWithPatternImage:finishedImage];
  52
+    
  53
+    return patternColor;
  54
+}
  55
+
  56
+@end
16  Example/UIImage+KGNoise.h
... ...
@@ -0,0 +1,16 @@
  1
+//
  2
+//  UIImage+KGNoise.h
  3
+//  KGNoiseExample
  4
+//
  5
+//  Created by Cory Imdieke on 9/13/12.
  6
+//  Copyright (c) 2012 BitSuites, LLC. All rights reserved.
  7
+//
  8
+
  9
+#import <UIKit/UIKit.h>
  10
+
  11
+@interface UIImage (KGNoise)
  12
+
  13
+- (UIImage *)imageWithNoiseOpacity:(CGFloat)opacity;
  14
+- (UIImage *)imageWithNoiseOpacity:(CGFloat)opacity andBlendMode:(CGBlendMode)blendMode;
  15
+
  16
+@end
60  Example/UIImage+KGNoise.m
... ...
@@ -0,0 +1,60 @@
  1
+//
  2
+//  UIImage+KGNoise.m
  3
+//  KGNoiseExample
  4
+//
  5
+//  Created by Cory Imdieke on 9/13/12.
  6
+//  Copyright (c) 2012 BitSuites, LLC. All rights reserved.
  7
+//
  8
+
  9
+#import "UIImage+KGNoise.h"
  10
+#import "KGNoise.h"
  11
+
  12
+@implementation UIImage (KGNoise)
  13
+
  14
+- (UIImage *)imageWithNoiseOpacity:(CGFloat)opacity{
  15
+	return [self imageWithNoiseOpacity:opacity andBlendMode:kCGBlendModeScreen];
  16
+}
  17
+
  18
+- (UIImage *)imageWithNoiseOpacity:(CGFloat)opacity andBlendMode:(CGBlendMode)blendMode{
  19
+    // Create a context to draw in
  20
+    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
  21
+    CGContextRef context = CGBitmapContextCreate(NULL,
  22
+                                                 self.size.width * self.scale,
  23
+                                                 self.size.height * self.scale,
  24
+                                                 8, /* bits per channel */
  25
+                                                 (self.size.width * self.scale * 4), /* 4 channels per pixel * numPixels/row */
  26
+                                                 colorSpace,
  27
+                                                 kCGImageAlphaPremultipliedLast);
  28
+    CGColorSpaceRelease(colorSpace);
  29
+	
  30
+	CGContextSaveGState(context);
  31
+	
  32
+    // Flip context
  33
+    CGContextTranslateCTM(context, 0, self.size.height * self.scale);
  34
+    CGContextScaleCTM(context, self.scale, -self.scale);
  35
+	
  36
+    UIGraphicsPushContext(context);
  37
+	
  38
+    // Draw the image
  39
+    [self drawAtPoint:CGPointMake(0.0, 0.0)];
  40
+	
  41
+	CGContextRestoreGState(context);
  42
+	
  43
+	CGContextClipToMask(context, CGRectMake(0.0, 0.0, self.size.width * self.scale, self.size.height * self.scale), [self CGImage]);
  44
+	
  45
+    // Noise on top
  46
+    [KGNoise drawNoiseWithOpacity:opacity andBlendMode:blendMode];
  47
+	
  48
+    // Create a CGImage from the context
  49
+    CGImageRef rawImage = CGBitmapContextCreateImage(context);
  50
+    UIGraphicsPopContext();
  51
+    CGContextRelease(context);
  52
+	
  53
+    // Create a UIImage from the CGImage
  54
+    UIImage *finishedImage = [UIImage imageWithCGImage:rawImage scale:self.scale orientation:self.imageOrientation];
  55
+    CGImageRelease(rawImage);
  56
+	
  57
+    return finishedImage;
  58
+}
  59
+
  60
+@end
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.