How to set tint color of an Image

Question

let tintedImage = #imageLiteral(resourceName: "user")
pictureImageView?.image = mainCircleImage.overlayed(with: tintedImage,color: UIColor.orange)

extension UIImage {
func overlayed(with overlay: UIImage,color:UIColor) -> UIImage? {
    defer {
        UIGraphicsEndImageContext()
    }
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    self.draw(in: CGRect(origin: CGPoint.zero, size: size))
    let tintedOverlay = overlay.tintedImageWithColor(color: color)
    tintedOverlay.draw(in: CGRect(origin: CGPoint.zero, size: size))
    if let image = UIGraphicsGetImageFromCurrentImageContext() {
        return image
    }
    return nil
}

func tint(color: UIColor, blendMode: CGBlendMode) -> UIImage
{
    let drawRect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    let context = UIGraphicsGetCurrentContext()
    context!.scaleBy(x: 1.0, y: -1.0)
    context!.translateBy(x: 0.0, y: -self.size.height)
    context!.clip(to: drawRect, mask: cgImage!)
    color.setFill()
    UIRectFill(drawRect)
    draw(in: drawRect, blendMode: blendMode, alpha: 1.0)
    let tintedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return tintedImage!
}

func tintedImageWithColor(color: UIColor) -> UIImage
{
    return self.tint(color: color, blendMode: CGBlendMode.multiply)
}
}

I have updated my question according to possible answer Here is my code for the changing the icon color. In some reason my user icon is not fully filling its color when i change the tint color.

Possible duplicate of [How to color a UIImage in swift?](https://stackoverflow.com/questions/31803157/how-to-color-a-uiimage-in-swift) — Tamás Sengel, Feb 12 '18 at 10:38

Reinier Melian · Accepted Answer · 2018-02-12T12:42:42.247

1

I had added 2 more methods to your extension of UIImagefor tint an Image and added some changes in your overlayed method

extension UIImage {
    func overlayed(with overlay: UIImage,color:UIColor) -> UIImage? {
        defer {
            UIGraphicsEndImageContext()
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        self.draw(in: CGRect(origin: CGPoint.zero, size: size))
        let tintedOverlay = overlay.tinted(color: color)
        tintedOverlay.draw(in: CGRect(origin: CGPoint.zero, size: size), blendMode: .multiply, alpha: 1.0)
        if let image = UIGraphicsGetImageFromCurrentImageContext() {
            return image
        }
        return nil
    }

    func tinted(color: UIColor) -> UIImage
    {
        UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
        let context = UIGraphicsGetCurrentContext()

        color.setFill()

        context!.translateBy(x: 0, y: self.size.height)
        context!.scaleBy(x: 1.0, y: -1.0)

        context!.setBlendMode(CGBlendMode.colorBurn)
        let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context!.draw(self.cgImage!, in: rect)

        context!.setBlendMode(CGBlendMode.sourceIn)
        context!.addRect(rect)
        context!.drawPath(using: CGPathDrawingMode.fill)

        let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return coloredImage!
    }
}

The content of Tinted method is from this question How can I color a UIImage in Swift? answer provided by @HR

Use It

    let mainCircleImage = UIImage(named: "actions_menu_edit")?
    let tintedImage = UIImage(named: "actions_menu_add")
    pictureImageView?.image = mainCircleImage?.overlayed(with: tintedImage!,color: UIColor.red)

UPDATED

Result with the last update

edited Feb 12 '18 at 12:42

answered Feb 12 '18 at 10:43

Reinier Melian

20,519
3
38
55

@DicleY change the tint color in the imageView where you are putting your image with .alwaysTemplate rendering mode – Reinier Melian Feb 12 '18 at 10:55
in some reason its keep making my changed tint image as black always which ever color i give.. @ReinierMelian – dicle Feb 12 '18 at 11:01
what does your overlayed `UIImageView` extension method method? – Reinier Melian Feb 12 '18 at 11:05
I have added it as well to my question – dicle Feb 12 '18 at 11:07
@DicleY you are trying to draw 2 images one in top of another and add a tin color to the second one? is this what you need to do? – Reinier Melian Feb 12 '18 at 11:11
yes i would like to change "user" image's tint color it is subview of the other imageView(circle_icon). I just want to change "user" 's tint color. – dicle Feb 12 '18 at 11:16
humm it worked 80%.. but weirdly my tint color is not fully red. there are some black dots inside of that new color... – dicle Feb 12 '18 at 11:30
@DicleY update your question with your current code in order to review it and see what can be wrong this time – Reinier Melian Feb 12 '18 at 11:32
I just did. Tried to add the image but not sure if its visible – dicle Feb 12 '18 at 11:39
Yes I can see it @DicleY i will review it – Reinier Melian Feb 12 '18 at 11:42
@DicleY can you post your two original images to test in my enviroment? – Reinier Melian Feb 12 '18 at 11:43
@DicleY I will review it – Reinier Melian Feb 12 '18 at 12:00
@DicleY sorry but you can post the user image on better resolution? – Reinier Melian Feb 12 '18 at 12:10
i did now can you have a look or i can give higher higher one again – dicle Feb 12 '18 at 12:11
@DicleY check my updated answer the problem is the blendMode for your case should be .overlay – Reinier Melian Feb 12 '18 at 12:17
Thats better when i set red etc. but when i set UIColor.orange its showing 2 different colors again.. – dicle Feb 12 '18 at 12:28
Thats so weird its only showing itself for light orange color.. there is nothing wrong with red – dicle Feb 12 '18 at 12:31
@DicleY yes I see, well I will check again ;) – Reinier Melian Feb 12 '18 at 12:31
@DicleY it seems a bug or something its very wierd, I think is related to the image itself – Reinier Melian Feb 12 '18 at 12:32
@DicleY check my last update I had founded in another SO answer – Reinier Melian Feb 12 '18 at 12:39

How to set tint color of an Image

1 Answers1

UPDATED