如何在 Swift 中为 UIImage 着色?
Posted
技术标签:
【中文标题】如何在 Swift 中为 UIImage 着色?【英文标题】:How can I color a UIImage in Swift? 【发布时间】: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 最优雅的解决方案:***.com/a/63167556/2692839 现在就是这么简单:yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate) 然后设置色调 【参考方案1】:简单的方法:
yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate)
yourIcon.tintColor = .someColor
顺便说一句,在 android 上更有趣!
yourIcon.setColorFilter(getColor(R.color.someColor), PorterDuff.Mode.MULTIPLY);
【讨论】:
这应该是公认的答案!非常简单的解决方案! @chlkdst - 对,现在这很容易。 *** 的一个大问题是,你得到的答案在很多年里都发生了巨大的变化。这个问题大约有十年的历史了——那个时代的答案现在已经没有价值了。在 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
【讨论】:
最佳答案在这里,保持相同的图像方向和质量 是的,我已经测试了上述所有答案,这确实考虑了规模,所以它不会给你像素化UIImage
s。非常好的答案,谢谢!
如果你有一张透明背景的图片,你可以将混合模式设置为.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 语法:***.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())
【讨论】:
这会忽略scale
、orientation
和UIImage
的其他参数。以上是关于如何在 Swift 中为 UIImage 着色?的主要内容,如果未能解决你的问题,请参考以下文章
在 Swift 中为完整的 UITableView 创建模糊效果