How can I change image tintColor

Question

I'm receiving image from a server, then based on a color chosen by the user, the image color will be changed.

I tried the following :

_sketchImageView.image = [_sketchImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[_sketchImageView setTintColor:color];

i got the opposite of my goal (the white color outside UIImage is colored with the chosen color).

what is going wrong?

i need to do the same in this question,the provided solution doesn't solve my case. How can I change image tintColor in iOS and WatchKit

Solution 1

Try to generate new image for yourself

UIImage *newImage = [_sketchImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale);
[yourTintColor set];
[newImage drawInRect:CGRectMake(0, 0, image.size.width, newImage.size.height)];
newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

_sketchImageView.image = newImage;

And use it.

Good luck

======= UPDATE =======

This solution will only change color of all pixel's image.

Example: we have a book image: http://pngimg.com/upload/book_PNG2113.png

And after running above code (exp: TintColor is RED). We have:

SO: how your image is depends on how you designed it

Solution 2

In Swift you can use this extension: [Based on @VietHung's objective-c solution]

Swift 5:

extension UIImage {
      func imageWithColor(color: UIColor) -> UIImage? {
        var image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()
        image.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

Previous Swift version:

extension UIImage {
    func imageWithColor(color: UIColor) -> UIImage? {
        var image = imageWithRenderingMode(.AlwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()
        image.drawInRect(CGRect(x: 0, y: 0, width: size.width, height: size.height))
        image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

Solution 3

In swift 2.0 you can use this

let image = UIImage(named:"your image name")?.imageWithRenderingMode(.AlwaysTemplate)
let yourimageView.tintColor = UIColor.redColor()
yourimageView.image = image

In swift 3.0 you can use this

let image = UIImage(named:"your image name")?.withRenderingMode(.alwaysTemplate)
let yourimageView.tintColor = UIColor.red
yourimageView.image = image

Solution 4

Try something like this

UIImage *originalImage = _sketchImageView.image
UIImage *newImage = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,50,50)]; // your image size
imageView.tintColor = [UIColor redColor];  // or whatever color that has been selected
imageView.image = newImage;
_sketchImageView.image = imageView.image;

Hope this helps.

Solution 5

In Swift 3.0 you can use this extension: [Based on @VietHung's objective-c solution]

extension UIImage {
    func imageWithColor(_ color: UIColor) -> UIImage? {
        var image = imageWithRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()
        image.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

View more solutions

Comments

[orkenstein]

If you want to fill image with some color you need more advanced solution. Like this: github.com/mxcl/UIImageWithColor

[Saif]

i think you need the effect of background color , try [_sketchImageView setBackgroundColor: color]

[user2168496]

i tried this solution before and it gives the same result. //UIImage *img = [UIImage resizableImageWithColor:color cornerRadius:10]; // UIImage *img = [UIImage imageWithColor:color size:CGSizeMake(20, 20)]; UIImage *img = [UIImage imageWithColor:color]; _sketchImageView.image=img;

[user2168496]

@saif [_sketchImageView setBackgroundColor: [UIColor clearColor]]; _sketchImageView.image = [_sketchImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; [_sketchImageView setTintColor:color]; gives me the same result

[user2168496]

this code gives CGContextDrawImage: invalid context 0x0. This is a serious error. This application, or a library it uses, is using an invalid context and is thereby contributing to an overall degradation of system stability and reliability. This notice is a courtesy: please fix this problem. It will become a fatal error in an upcoming update. any idea plz?

[gabriel]

Check if your UIImageView instance isn't blank. If the method is not being called against an empty UIIMageView.

[user2168496]

thanx for the help, but this changes the image to white image (as it is a blank one )

[user2168496]

yes there is an image,the image is displayed in the imageview then after the user select color,i want its color to be changed

[gabriel]

Could you try the method I suggested on some isolated environment? Like an empty project and hardcode the color and image, just to be sure that error message is not related with this method, but with something else that we cannot see (we have just few lines of your code). Because I tried it and works without any error message.

[user2168496]

Yes thanx, i did,, but this solution gives the same result mentioned in the question. to have better understanding for my case imagine that you have imageview contains image for Dress, i want the color of the dress to change based on a color selected by the user.. any idea?

[Gismay]

So you are saying that your _sketchImageView.image is blank?

[user2168496]

No,it is not..i mean after applying your code i got a white image

[Gismay]

Ah, ok, sorry. It works for me. I guess my images are simpler (i.e. one colour with a clear background).

[user2168496]

thanx a lot, lets say that i have a book image, this solution colored the image outside the book borders.. i want the opposite,i.e the book itself to be colored. any idea why is this happening?

[Tony]

I think you need to re-design your book image. I've just edited my post. See it

[user2168496]

Yeah.yessss.. i tried your image and it works fine :) i really appreciate

[NGG]

didn't work for me, I prefer this answer : stackoverflow.com/questions/19274789/…

[Joe]

For Swift 3.0, you'll want to use withRenderingMode, not imageWithRenderingMode.

[thewaywewere]

Welcome to SO! Your reply looks like a comment rather than an answer. Once you have sufficient reputation you will be able to comment on any post. Also check this what can I do instead. If you intended to Answer, read this how-to-answer to follow the SO guidelines.