ฉันจะระบายสี UIImage ใน Swift ได้อย่างไร


103

arrowWhiteฉันมีภาพที่เรียกว่า ฉันต้องการปรับสีภาพนี้ให้เป็นสีดำ

func attachDropDownArrow() -> NSMutableAttributedString {
    let image:UIImage = UIImage(named: "arrowWhite.png")!
    let attachment = NSTextAttachment()
    attachment.image = image
    attachment.bounds = CGRectMake(2.25, 2, attachment.image!.size.width - 2.25, attachment.image!.size.height - 2.25)
    let attachmentString = NSAttributedString(attachment: attachment)
    let myString = NSMutableAttributedString(string: NSString(format: "%@", self.privacyOptions[selectedPickerRow]) as String)
    myString.appendAttributedString(attachmentString)
    return myString
}

blackColourฉันต้องการที่จะได้รับภาพนี้ใน
tintColorไม่ทำงาน...


สามารถทำได้จากตัวสร้างส่วนต่อประสานดูที่ @Harry Bloom ด้านล่าง
Andy Weinstein

โซลูชันที่หรูหราที่สุด: stackoverflow.com/a/63167556/2692839
Umair Ali

คำตอบ:


196

Swift 4 และ 5

extension UIImageView {
  func setImageColor(color: UIColor) {
    let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
    self.image = templateImage
    self.tintColor = color
  }
}

เรียกแบบนี้ว่า

let imageView = UIImageView(image: UIImage(named: "your_image_name"))
imageView.setImageColor(color: UIColor.purple)

Alternativ สำหรับ Swift 3, 4 หรือ 5

extension UIImage {

    func maskWithColor(color: UIColor) -> UIImage? {
        let maskImage = cgImage!

        let width = size.width
        let height = size.height
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let context = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)!

        context.clip(to: bounds, mask: maskImage)
        context.setFillColor(color.cgColor)
        context.fill(bounds)

        if let cgImage = context.makeImage() {
            let coloredImage = UIImage(cgImage: cgImage)
            return coloredImage
        } else {
            return nil
        }
    }

}

สำหรับ Swift 2.3.2

extension UIImage {
func maskWithColor(color: UIColor) -> UIImage? {

    let maskImage = self.CGImage
    let width = self.size.width
    let height = self.size.height
    let bounds = CGRectMake(0, 0, width, height)

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue)
    let bitmapContext = CGBitmapContextCreate(nil, Int(width), Int(height), 8, 0, colorSpace, bitmapInfo.rawValue) //needs rawValue of bitmapInfo

    CGContextClipToMask(bitmapContext, bounds, maskImage)
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor)
    CGContextFillRect(bitmapContext, bounds)

    //is it nil?
    if let cImage = CGBitmapContextCreateImage(bitmapContext) {
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage

    } else {
        return nil
    } 
 }
}

เรียกแบบนี้ว่า

let image = UIImage(named: "your_image_name")
testImage.image =  image?.maskWithColor(color: UIColor.blue)

8
เริ่มต้นได้ดี แต่ผลลัพธ์เป็นเม็ดเล็ก ๆ ดังที่ @Darko กล่าวถึงด้านล่างฉันเชื่อว่าเป็นเพราะคุณไม่ได้คำนึงถึงมาตราส่วนและพารามิเตอร์อื่น ๆ
TruMan1

1
เหมือนกันสำหรับฉัน - ภาพพิกเซล
Async-

นายอำเภอทำงานให้ฉันใน Swift 3 ขอบคุณ !!
oscar castellon

4
ไม่รักษาการปรับขนาดและการวางแนว
Shailesh

ภายในส่วนขยายฟังก์ชันควรเป็นแบบสาธารณะ
Shivam Pokhriyal

89

มีการสร้างขึ้นในวิธีการที่จะได้รับUIImageที่จะแสดงผลโดยอัตโนมัติในโหมดแม่แบบ สิ่งนี้ใช้ tintColor ของมุมมองเพื่อระบายสีภาพ:

let templateImage = originalImage.imageWithRenderingMode(UIImageRenderingModeAlwaysTemplate)
myImageView.image = templateImage
myImageView.tintColor = UIColor.orangeColor()

3
นี่คือคำตอบที่ดีที่สุด - ดูข้อมูลเพิ่มเติมได้ใน Apple Docs - developer.apple.com/library/content/documentation/…
Mark

6
ดูไวยากรณ์ของ Swift 3 สำหรับโหมดการแสดงผลที่นี่: stackoverflow.com/a/24145287/448718
Phil_Ken_Sebben

6
การใช้ imageview นั้นชัดเจน แต่เราต้องการ UIImage เท่านั้น
djdance

3
ไม่ใช่วิธีแก้ปัญหาหากคุณกำลังทำงานกับวัตถุ UIImage โดยไม่ขึ้นกับ UIImageView ใช้งานได้เฉพาะเมื่อคุณสามารถเข้าถึง UIImageView
Pez

ใช้งานได้ดีแม้ในกรณีที่ myImageView เป็น UIButton
daxh

43

ก่อนอื่นคุณต้องเปลี่ยนคุณสมบัติการแสดงผลของรูปภาพเป็น "Template Image" ในโฟลเดอร์. xcassets จากนั้นคุณสามารถเปลี่ยนคุณสมบัติสีอ่อนของอินสแตนซ์ของ UIImageView ของคุณได้ดังนี้:

imageView.tintColor = UIColor.whiteColor()

ป้อนคำอธิบายภาพที่นี่


1
ไม่tintColorได้ออกมาจากUIImageในบางจุด? ฉันรู้สึกตื่นเต้นกับคำตอบนี้ แต่ดูเหมือนจะไม่มีใน iOS 10
Travis Griggs

1
เฮ้ @TravisGriggs ขออภัยฉันเพิ่งแก้ไขคำตอบของฉันให้มีความหมายมากขึ้นคุณสมบัติ tintColor อยู่บน UIImageView ไม่ใช่ UIImage
Harry Bloom

Tx นี่มันเจ๋งมาก! หมายเหตุ: สีจะปรากฏในส่วนมุมมองของตัวตรวจสอบ ImageView ซึ่งอยู่ถัดลงไปเล็กน้อย เพียงเพื่อให้ชัดเจนเป็นพิเศษ
Andy Weinstein

31

ฉันลงเอยด้วยสิ่งนี้เพราะคำตอบอื่น ๆ อาจสูญเสียความละเอียดหรือทำงานกับ UIImageView ไม่ใช่ UIImage หรือมีการกระทำที่ไม่จำเป็น:

สวิฟต์ 3

extension UIImage {

    public func maskWithColor(color: UIColor) -> UIImage {

        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context = UIGraphicsGetCurrentContext()!

        let rect = CGRect(origin: CGPoint.zero, size: size)

        color.setFill()
        self.draw(in: rect)

        context.setBlendMode(.sourceIn)
        context.fill(rect)

        let resultImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return resultImage
    }

}

4
คำตอบที่ดีที่สุดในที่นี้คงการวางแนวและคุณภาพของภาพไว้เหมือนเดิม
SmartTree

ใช่ผมได้ทดสอบทุกคำตอบข้างต้นและจะใช้เวลานี้แน่นอนขนาดเข้าสู่การพิจารณาจึงจะไม่ทำให้คุณ pixelated UIImages คำตอบที่ดีจริงๆขอบคุณ!
Guilherme Matuella

21

ฟังก์ชันนี้ใช้กราฟิกหลักเพื่อให้บรรลุสิ่งนี้

func overlayImage(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
}

8
วิธีนี้ใช้ได้ผลโดยที่อีกสองคำตอบด้านบนผิด
chrysb

4
ใช่มันทำงานได้อย่างสมบูรณ์ maskWithColor ส่วนขยายใช้งานได้ แต่ไม่สนใจscaleดังนั้นภาพจึงดูไม่คมชัดในอุปกรณ์ที่มีความละเอียดสูง
Moin Uddin

งานนี้เป๊ะ !! เราใช้ในส่วนขยายและทำงานตกลง โซลูชันอื่น ๆ ไม่สนใจมาตราส่วน ...
Javi Campaña

17

สำหรับ swift 4.2 เพื่อเปลี่ยนสี UIImage ตามที่คุณต้องการ (สีทึบ)

extension UIImage {
    func imageWithColor(color: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color.setFill()

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

วิธีใช้

self.imgVw.image = UIImage(named: "testImage")?.imageWithColor(UIColor.red)

10

สร้างส่วนขยายบน UIImage:

/// UIImage Extensions
extension UIImage {
    func maskWithColor(color: UIColor) -> UIImage {

        var maskImage = self.CGImage
        let width = self.size.width
        let height = self.size.height
        let bounds = CGRectMake(0, 0, width, height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(CGImageAlphaInfo.PremultipliedLast.rawValue)
        let bitmapContext = CGBitmapContextCreate(nil, Int(width), Int(height), 8, 0, colorSpace, bitmapInfo)

        CGContextClipToMask(bitmapContext, bounds, maskImage)
        CGContextSetFillColorWithColor(bitmapContext, color.CGColor)
        CGContextFillRect(bitmapContext, bounds)

        let cImage = CGBitmapContextCreateImage(bitmapContext)
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage!
    }
}

จากนั้นคุณสามารถใช้งานได้ดังนี้:

image.maskWithColor(UIColor.redColor())

1
ละเว้นนี้scale, orientationและพารามิเตอร์อื่น ๆ UIImageของ
Nikolai Ruhe

10

ฉันพบว่าวิธีแก้ปัญหาโดย HR มีประโยชน์มากที่สุด แต่ปรับให้เข้ากับ Swift 3 เล็กน้อย

extension UIImage {

    func maskWithColor( 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)

         let rect = CGRect(x: 0.0, y: 0.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!
    }
}

สิ่งนี้คำนึงถึงมาตราส่วนและไม่ได้สร้างภาพความละเอียดต่ำเหมือนโซลูชันอื่น ๆ การใช้งาน:

image = image.maskWithColor(color: .green )

นี่คือการนำไปใช้งานอย่างแน่นอน (การทำให้สับสนจากสิ่งอื่น ๆ ในหน้านี้)
Scott Corscadden

เพื่อความปลอดภัยเป็นพิเศษควรห่อหุ้มด้วย if-allow หรือตัวป้องกัน
Chris Paveglio

6

เครื่องห่อส่วนขยาย Swift 3 จากคำตอบของ @Nikolai Ruhe

extension UIImageView {

    func maskWith(color: UIColor) {
        guard let tempImage = image?.withRenderingMode(.alwaysTemplate) else { return }
        image = tempImage
        tintColor = color
    }

}

สามารถใช้งานได้UIButtonเช่นกันเช่น:

button.imageView?.maskWith(color: .blue)

5

สวิฟต์ 4

 let image: UIImage? =  #imageLiteral(resourceName: "logo-1").withRenderingMode(.alwaysTemplate)
    topLogo.image = image
    topLogo.tintColor = UIColor.white

4

เพิ่มส่วนขยายนี้ในโค้ดของคุณและเปลี่ยนสีของภาพในสตอรี่บอร์ดเอง

Swift 4 และ 5:

extension UIImageView {
    @IBInspectable
    var changeColor: UIColor? {
        get {
            let color = UIColor(cgColor: layer.borderColor!);
            return color
        }
        set {
            let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
            self.image = templateImage
            self.tintColor = newValue
        }
    }
}

ตัวอย่างสตอรี่บอร์ด:

ป้อนคำอธิบายภาพที่นี่



1

สวิฟต์ 3

21 มิถุนายน 2560

ฉันใช้ CALayer เพื่อมาสก์รูปภาพที่กำหนดด้วย Alpha Channel

import Foundation


extension UIImage {

    func maskWithColor(color: UIColor) -> UIImage? {
    
        let maskLayer = CALayer()
        maskLayer.bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        maskLayer.backgroundColor = color.cgColor
        maskLayer.doMask(by: self)
        let maskImage = maskLayer.toImage()
        return maskImage
    }

}


extension CALayer {
    func doMask(by imageMask: UIImage) {
        let maskLayer = CAShapeLayer()
        maskLayer.bounds = CGRect(x: 0, y: 0, width: imageMask.size.width, height: imageMask.size.height)
        bounds = maskLayer.bounds
        maskLayer.contents = imageMask.cgImage
        maskLayer.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
        mask = maskLayer
    }

    func toImage() -> UIImage?
    {
        UIGraphicsBeginImageContextWithOptions(bounds.size,
                                               isOpaque,
                                               UIScreen.main.scale)
        guard let context = UIGraphicsGetCurrentContext() else {
            UIGraphicsEndImageContext()
            return nil
        }
        render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

1

เวอร์ชัน Swift 3 พร้อมมาตราส่วนและการวางแนวจากคำตอบ @kuzdu

extension UIImage {

    func mask(_ color: UIColor) -> UIImage? {
        let maskImage = cgImage!

        let width = (cgImage?.width)!
        let height = (cgImage?.height)!
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let context = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)!

        context.clip(to: bounds, mask: maskImage)
        context.setFillColor(color.cgColor)
        context.fill(bounds)

        if let cgImage = context.makeImage() {
            let coloredImage = UIImage.init(cgImage: cgImage, scale: scale, orientation: imageOrientation)
            return coloredImage
        } else {
            return nil
        }
    }
}

1

สวิฟต์ 4.

ใช้ส่วนขยายนี้เพื่อสร้างภาพสีทึบ

extension UIImage {   

    public func coloredImage(color: UIColor) -> UIImage? {
        return coloredImage(color: color, size: CGSize(width: 1, height: 1))
    }

    public func coloredImage(color: UIColor, size: CGSize) -> UIImage? {

        UIGraphicsBeginImageContextWithOptions(size, false, 0)

        color.setFill()
        UIRectFill(CGRect(origin: CGPoint(), size: size))

        guard let image = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        UIGraphicsEndImageContext()

        return image
    }
}

นายอำเภอทำงานให้ฉันใน navigationBar.setBackgroundImage และ Swift 5 ขอบคุณ!
Jesse

1

โพสต์ iOS 13 คุณสามารถใช้งานได้ดังนี้

arrowWhiteImage.withTintColor(.black, renderingMode: .alwaysTemplate)

1

เพิ่มฟังก์ชันส่วนขยาย:

extension UIImageView {
    func setImage(named: String, color: UIColor) {
        self.image = #imageLiteral(resourceName: named).withRenderingMode(.alwaysTemplate)
        self.tintColor = color
    }
}

ใช้เช่น:

anyImageView.setImage(named: "image_name", color: .red)

0

นี่คือโซลูชันของ HR เวอร์ชัน 3 ที่รวดเร็ว

func overlayImage(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
}

-1

เนื่องจากฉันพบว่าคำตอบของ Darko มีประโยชน์มากในการกำหนดสีพินที่กำหนดเองสำหรับคำอธิบายประกอบ mapView แต่ต้องทำการแปลงบางอย่างสำหรับ Swift 3 คิดว่าฉันจะแชร์โค้ดที่อัปเดตพร้อมกับคำแนะนำของฉันสำหรับคำตอบของเขา:

extension UIImage {
    func maskWithColor(color: UIColor) -> UIImage {

        var maskImage = self.CGImage
        let width = self.size.width
        let height = self.size.height
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let bitmapContext = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)

        bitmapContext!.clip(to: bounds, mask: maskImage!)
        bitmapContext!.setFillColor(color.cgColor)
        bitmapContext!.fill(bounds)

        let cImage = bitmapContext!.makeImage()
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage!
    }
}

-2

ผมได้มีการปรับเปลี่ยนนามสกุลพบได้ที่นี่: Github สรุปสาระสำคัญสำหรับการSwift 3ที่ผมได้ทดสอบในบริบทของส่วนขยายสำหรับ UIImage นั้น

func tint(with color: UIColor) -> UIImage 
{
   UIGraphicsBeginImageContext(self.size)
   guard let context = UIGraphicsGetCurrentContext() else { return self }

   // flip the image
   context.scaleBy(x: 1.0, y: -1.0)
   context.translateBy(x: 0.0, y: -self.size.height)

   // multiply blend mode
   context.setBlendMode(.multiply)

   let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
   context.clip(to: rect, mask: self.cgImage!)
   color.setFill()
   context.fill(rect)

   // create UIImage
   guard let newImage = UIGraphicsGetImageFromCurrentImageContext() else { return self }
   UIGraphicsEndImageContext()

   return newImage
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.