【问题标题】:How can I color a UIImage in Swift?如何在 Swift 中为 UIImage 着色?
【发布时间】:2015-10-26 11:55:09
【问题描述】:

我有一张名为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 不起作用...

【问题讨论】:

  • 可以从 Interface Builder 中获得,请参阅下面的@Harry Bloom
  • 最优雅的解决方案:stackoverflow.com/a/63167556/2692839
  • 现在就是这么简单:yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate) 然后设置色调

标签: ios image swift colors uiimage


【解决方案1】:

简单的方法:

yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate)
yourIcon.tintColor = .someColor

顺便说一句,在 Android 上更有趣!

yourIcon.setColorFilter(getColor(R.color.someColor), PorterDuff.Mode.MULTIPLY);

【讨论】:

  • 这应该是公认的答案!非常简单的解决方案!
  • @chlkdst - 对,现在这很容易。 Stackoverflow 的一个大问题是,你得到的答案在很多年里都发生了巨大的变化。这个问题大约有十年的历史了——那个时代的答案现在已经没有价值了。在 SO 上是个难题。
【解决方案2】:

我最终得到了这个,因为其他答案要么失去分辨率,要么使用 UIImageView,而不是 UIImage,或者包含不必要的操作:

斯威夫特 3

extension UIImage {
    
    public func mask(with 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
    }
    
}

【讨论】:

  • 最佳答案在这里,保持相同的图像方向和质量
  • 是的,我已经测试了上述所有答案,这确实考虑了规模,所以它不会给你像素化UIImages。非常好的答案,谢谢!
  • 如果你有一张透明背景的图片,你可以将混合模式设置为.destinationAtop。这使您可以为图像的前景着色,而不影响背景。
【解决方案3】:

对于 iOS13+,有 withTintColor(__:)withTintColor(_:renderingMode:) 方法。

示例用法:

let newImage = oldImage.withTintColor(.red)

let newImage = oldImage.withTintColor(.red, renderingMode: .alwaysTemplate)

【讨论】:

    【解决方案4】:

    让 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)
    

    【讨论】:

      【解决方案5】:

      添加扩展功能:

      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)
      

      【讨论】:

        【解决方案6】:

        发布 iOS 13 你可以像这样使用它

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

        【讨论】:

          【解决方案7】:

          在您的代码中添加此扩展并更改情节提要本身的图像颜色。

          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
                  }
              }
          }
          

          故事板预览:

          【讨论】:

            【解决方案8】:

            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)
            

            另类 适用于 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

            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)
            

            【讨论】:

            • 不错的开始,但结果是颗粒状的。正如@Darko 下面提到的,我相信这是因为您没有考虑规模和其他参数。
            • 对我来说也一样 - 像素化图像
            • 在 Swift 3 中为我工作完美。谢谢!!
            • 不保留缩放和方向。
            • 我不太清楚。额外的好处是第三方(pod、库......)可以使用这个扩展。如果您愿意,可以将此功能设置为公开。我认为这没有任何缺点。
            【解决方案9】:

            斯威夫特 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 中为我工作完美。谢谢!
            【解决方案10】:

            斯威夫特 4

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

            【讨论】:

              【解决方案11】:

              来自@kuzdu 答案的具有比例和方向的 Swift 3 版本

              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
                      }
                  }
              }
              

              【讨论】:

                【解决方案12】:

                此功能使用核心图形来实现。

                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
                }
                

                【讨论】:

                • 这行得通,其他前两个答案是错误的。
                • 是的,这非常有效。 maskWithColor 扩展有效,但忽略了scale,因此图像在更高分辨率的设备上看起来不清晰。
                • 这很完美!!我们在扩展中使用并运行正常。其他解决方案忽略规模......
                【解决方案13】:

                我已经修改了此处找到的扩展:Github Gist,用于 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
                }
                

                【讨论】:

                • 工作正常,在 swift 5.x 中工作并回答问题! :)
                【解决方案14】:

                斯威夫特 3

                2017 年 6 月 21 日

                我使用 CALayer 用 Alpha 通道屏蔽给定图像

                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
                    }
                }
                

                【讨论】:

                  【解决方案15】:

                  这里是 swift 3 版本的 HR 解决方案。

                  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
                  }
                  

                  【讨论】:

                    【解决方案16】:

                    来自@Nikolai Ruhe 答案的 Swift 3 扩展包装器。

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

                    也可以用于UIButton,例如:

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

                    【讨论】:

                      【解决方案17】:

                      首先,您必须在 .xcassets 文件夹中将图像的渲染属性更改为“模板图像”。 然后,您可以像这样更改 UIImageView 实例的 tint color 属性:

                      imageView.tintColor = UIColor.whiteColor()
                      

                      【讨论】:

                      • tintColor 是否在某个时候从UIImage 中删除?我对这个答案感到很兴奋,但它似乎在 iOS 10 中不存在
                      • 嘿@TravisGriggs。抱歉,我刚刚编辑了我的答案,使其更具描述性,tintColor 属性在 UIImageView 上,而不是 UIImage
                      • Tx,这太酷了!注意:Tint 出现在 ImageView 检查器的 View 部分中,稍微靠下一点。只是为了更加清楚。
                      【解决方案18】:

                      我发现 H R 的解决方案最有帮助,但稍微适应了 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 )
                      

                      【讨论】:

                      • 这绝对是要使用的实现(与此页面上的其他实现消除歧义)。
                      • 为了更加安全,强制展开应该包裹在 if-let 或防护中。
                      【解决方案19】:

                      因为我发现 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!
                          }
                      }
                      

                      【讨论】:

                        【解决方案20】:

                        有一个内置方法可以获取在template mode 中自动呈现的UIImage。这使用视图的 tintColor 为图像着色:

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

                        【讨论】:

                        • 这是最好的答案 - 更多信息可以在 Apple Docs 中找到 - developer.apple.com/library/content/documentation/…
                        • 在此处查看渲染模式的 Swift 3 语法:stackoverflow.com/a/24145287/448718
                        • 使用imageview很明显,但我们只想要UIImage
                        • 如果您独立于 UIImageView 使用 UIImage 对象,这不是一个解决方案。这仅在您有权访问 UIImageView 时才有效
                        • 即使在 myImageView 是 UIButton 的情况下也能很好地工作
                        【解决方案21】:

                        在 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())
                        

                        【讨论】:

                        • 这会忽略scaleorientationUIImage的其他参数。
                        猜你喜欢
                        • 1970-01-01
                        • 2017-01-06
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 2018-06-02
                        相关资源
                        最近更新 更多