Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to tint an image/show a colour?

2 things i want to do, which are related:

  1. Show a block of any colour. So i could change that colour to something else at any time.
  2. Tint a UIImage to be a different colour. An overlay of colour with alpha turned down could work here, but say it was an image which had a transparent background and didn't take up the full square of the image.

Any ideas?

like image 777
Andrew Avatar asked Feb 28 '11 18:02

Andrew


People also ask

How do I tint an image with a color in CSS?

This time it's pretty simple. Just give the image element a background color and on hover change the image's opacity so the background color shows through, giving the appearance of an image tint.

How to apply a color tint to an image?

To apply a color tint to an image, upload your photo or drag n drop it to the editor. Next, click on the ‘Image Effects & Filters’ button located at the top toolbar of the editor. Scroll down and select the ‘Tint Image’ tool. Adjust the color of the tint and its intensity using the slider.

How do I change the color of an image?

To change image color, upload your photo or drag n drop it to the editor. Next, click on the ‘Image Effects & Filters’ button located at the top toolbar of the editor. Scroll down and select the tint tool. Adjust the color of the image and its intensity using the slider.

How do I tint a color swatch?

With the color swatch created, you can apply that color to other artwork and then create a tint, or lighter version, of the color. Apply the swatch you created to the fill or stroke of artwork. Click the Fill color or Stroke color in the Properties panel and click the Color Mixer option at the top of the panel to show a single tint (T) slider.

How to tint an image on Facebook?

Tutorials: Animated TextSwapping FacesChange Eye ColorAnimated WinkPost Animations on FacebookReplace Sky with SunsetPositive ReviewsRemove ObjectsRotated TextChange Background LunaPic> Filters> Color Tint Upload your photo for tint or, open URL Use Lunapic to Tint your Image! Use form above to pick an image file or URL


2 Answers

Another option, would be to use category methods on UIImage like this...

// Tint the image, default to half transparency if given an opaque colour.
- (UIImage *)imageWithTint:(UIColor *)tintColor {
    CGFloat white, alpha;
    [tintColor getWhite:&white alpha:&alpha];
    return [self imageWithTint:tintColor alpha:(alpha == 1.0 ? 0.5f : alpha)];
}

// Tint the image
- (UIImage *)imageWithTint:(UIColor *)tintColor alpha:(CGFloat)alpha {

    // Begin drawing
    CGRect aRect = CGRectMake(0.f, 0.f, self.size.width, self.size.height);
    UIGraphicsBeginImageContext(aRect.size);

    // Get the graphic context
    CGContextRef c = UIGraphicsGetCurrentContext(); 

    // Converting a UIImage to a CGImage flips the image, 
    // so apply a upside-down translation
    CGContextTranslateCTM(c, 0, self.size.height); 
    CGContextScaleCTM(c, 1.0, -1.0);

    // Draw the image
    [self drawInRect:aRect];

    // Set the fill color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextSetFillColorSpace(c, colorSpace);

    // Set the mask to only tint non-transparent pixels
    CGContextClipToMask(c, aRect, self.CGImage);

    // Set the fill color
    CGContextSetFillColorWithColor(c, [tintColor colorWithAlphaComponent:alpha].CGColor);

    UIRectFillUsingBlendMode(aRect, kCGBlendModeColor);

    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();    

    // Release memory
    CGColorSpaceRelease(colorSpace);

    return img;
}
like image 90
Daniel Thorpe Avatar answered Oct 01 '22 23:10

Daniel Thorpe


The first one is easy. Make a new UIView and set its background color to whatever color you’d like.

The second is more difficult. As you mentioned, you can put a new view on top of it with transparency turned down, but to get it to clip in the same places, you’d want to use a mask. Something like this:

UIImage *myImage = [UIImage imageNamed:@"foo.png"];

UIImageView *originalImageView = [[UIImageView alloc] initWithImage:myImage];
[originalImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
[parentView addSubview:originalImageView];

UIView *overlay = [[UIView alloc] initWithFrame:[originalImageView frame]];

UIImageView *maskImageView = [[UIImageView alloc] initWithImage:myImage];
[maskImageView setFrame:[overlay bounds]];

[[overlay layer] setMask:[maskImageView layer]];

[overlay setBackgroundColor:[UIColor redColor]];

[parentView addSubview:overlay];

Keep in mind you’ll have to #import <QuartzCore/QuartzCore.h> in the implementation file.

like image 33
Jeff Kelley Avatar answered Oct 02 '22 00:10

Jeff Kelley