如何使用渐变为 UIImage 着色？

Question

我到处搜索但没有找到解决方案。我有图像 1。如何以编程方式使用渐变对它们进行着色以获得图像 2 和 3？以下是这些图像：

我通过 Photoshop 应用到它们的色调是简单的 2 色线性渐变。

我的问题是：我怎样才能以编程方式实现这种效果？

---

解决方案： jrtc27 给了我几乎工作示例。我修复了它（对于 ARC）并使其可重用（使用 UIImage 的类别）。这是它：

- (UIImage *)tintedWithLinearGradientColors:(NSArray *)colorsArr {
    CGFloat scale = self.scale;
    UIGraphicsBeginImageContext(CGSizeMake(self.size.width * scale, self.size.height * scale));
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, self.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGRect rect = CGRectMake(0, 0, self.size.width * scale, self.size.height * scale);
    CGContextDrawImage(context, rect, self.CGImage);

    // Create gradient

    UIColor *colorOne = [colorsArr objectAtIndex:1]; // top color
    UIColor *colorTwo = [colorsArr objectAtIndex:0]; // bottom color


    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, (id)colorTwo.CGColor, nil];
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL);

    // Apply gradient

    CGContextClipToMask(context, rect, self.CGImage);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0,self.size.height * scale), 0);
    UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return gradientImage;
}

Answer 1

编辑：这是一个支持非视网膜和视网膜显示的版本

该方法可以用作 UIImage 的类别

+ (UIImage *)imageWithGradient:(UIImage *)img startColor:(UIColor *)color1 endColor:(UIColor *)color2 {
    UIGraphicsBeginImageContextWithOptions(img.size, NO, img.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, img.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
    //CGContextDrawImage(context, rect, img.CGImage);

    // Create gradient
    NSArray *colors = [NSArray arrayWithObjects:(id)color2.CGColor, (id)color1.CGColor, nil];
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL);

    // Apply gradient
    CGContextClipToMask(context, rect, img.CGImage);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0, img.size.height), 0);
    UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    CGGradientRelease(gradient);
    CGColorSpaceRelease(space);

    return gradientImage;
}

编辑：由 sobri 添加更改

Answer 2

斯威夫特 4 版本。

import UIKit

extension UIImage {

func tintedWithLinearGradientColors(colorsArr: [CGColor]) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale);
    guard let context = UIGraphicsGetCurrentContext() else {
        return UIImage()
    }
    context.translateBy(x: 0, y: self.size.height)
    context.scaleBy(x: 1, y: -1)

    context.setBlendMode(.normal)
    let rect = CGRect.init(x: 0, y: 0, width: size.width, height: size.height)

    // Create gradient
    let colors = colorsArr as CFArray
    let space = CGColorSpaceCreateDeviceRGB()
    let gradient = CGGradient(colorsSpace: space, colors: colors, locations: nil)

    // Apply gradient
    context.clip(to: rect, mask: self.cgImage!)
    context.drawLinearGradient(gradient!, start: CGPoint(x: 0, y: 0), end: CGPoint(x: 0, y: self.size.height), options: .drawsAfterEndLocation)
    let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return gradientImage!
}
}

Answer 3

我相信以下内容应该有效 - 如果无效请发表评论！

// Load image
UIImage *image = [UIImage imageNamed:@"MyCoolImage.png"];
CGFloat scale = image.scale;
UIGraphicsBeginImageContext(CGSizeMake(image.size.width * scale, image.size.height * scale));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

CGContextSetBlendMode(context, kCGBlendModeMultiply);
CGRect rect = CGRectMake(0, 0, image.size.width * scale, image.size.height * scale);
CGContextDrawImage(context, rect, image.CGImage);

// Create gradient

UIColor *colorOne = ....;
UIColor *colorTwo = ....;

NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, (id)colorTwo.CGColor, nil];
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(space, (CFArrayRef)colors, NULL);

// Apply gradient

CGContextClipToMask(context, rect, image.CGImage);
CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0,image.size.height * scale), 0);
CGGradientRelease(gradient);
UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

基本思想归功于 CoffeeShopped。

Answer 4

Swift 版本（作为 UIImage 扩展，使用雷米的答案）：

extension UIImage {
    func tintedWithLinearGradientColors(colorsArr: [CGColor!]) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale);
        let context = UIGraphicsGetCurrentContext()
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0)

        CGContextSetBlendMode(context, kCGBlendModeNormal)
        let rect = CGRectMake(0, 0, self.size.width, self.size.height)

        // Create gradient

        let colors = colorsArr as CFArray
        let space = CGColorSpaceCreateDeviceRGB()
        let gradient = CGGradientCreateWithColors(space, colors, nil)

        // Apply gradient

        CGContextClipToMask(context, rect, self.CGImage)
        CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(0, self.size.height), 0)
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return gradientImage
    }
}

Answer 5

类 ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    
  
    
    //Original image displayed as is
    let imageView = UIImageView()
    imageView.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
    imageView.contentMode = .scaleAspectFit
    view.addSubview(imageView)
    
    let myImageName = "image.png"
    let myImage = UIImage(named: myImageName)
    imageView.image = myImage
    
    //Let's change the image to Gradient Color
    let imageView2 = UIImageView()
    imageView2.frame = CGRect(x: 300, y: 50, width: 200, height: 200)
    imageView2.contentMode = .scaleAspectFit
    view.addSubview(imageView2)
    
    let myImageName2 = "apple_logo.png"
    let myImage2 = UIImage(named: myImageName2)
    imageView2.image = myImage2!.maskWithGradientColor(color: UIColor.red)
            
}

}

扩展 UIImage {
func maskWithGradientColor(颜色: UIColor) ->用户界面图像？ {

    let 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)
    
    let locations:[CGFloat] = [0.0, 1.0]
    let bottom = UIColor(red: 1, green: 0, blue: 0, alpha: 1).cgColor
    let top = UIColor(red: 0, green: 1, blue: 0, alpha: 0).cgColor
    let colors = [top, bottom] as CFArray
    let gradient = CGGradient(colorsSpace: colorSpace, colors: colors, locations: locations)
    let startPoint = CGPoint(x: width/2, y: 0)
    let endPoint = CGPoint(x: width/2, y: height)
    
    bitmapContext!.clip(to: bounds, mask: maskImage!)
    bitmapContext!.drawLinearGradient(gradient!, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: UInt32(0)))
    
    if let cImage = bitmapContext!.makeImage() {
        let coloredImage = UIImage(cgImage: cImage)
        return coloredImage
    }
    else  {
        return nil
    }
}

}