Swift UIView with multiply effect - ios

Question

What I've been trying to achieve for a couple of hours is something like the following:
I would like to have a UIImage in the background and then preferably a UIView with a background color of red with some kind of multiply effect (the red area). Is this possible? I've seen a few extensions for UIImage that tints them, but that would only work if I wanted my WHOLE image to have a red multiply color effect.
Thanks

Answer 1

You could just add a red UIView to the top of your UIImageView. Adjust the alpha to make it transparent:
let someView = UIView(frame: someImageView.frame)
someView.backgroundColor = UIColor(colorLiteralRed: 255.0/255.0, green: 0, blue: 0, alpha: 0.5)
someImageView.addSubview(someView)
Using a multiply instead:
let img = UIImage(named: “background”)
let img2 = UIImage(named: “effect”) //Make sure this is your red image same size as the background
let rect = CGRect(x: 0, y: 0, width: img.size.width, height: img.size.height)
UIGraphicsBeginImageContextWithOptions(img.size, true, 0)
let context = UIGraphicsGetCurrentContext()
// fill the background with white so that translucent colors get lighter
CGContextSetFillColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextFillRect(context, rect)
img.drawInRect(rect, blendMode: .Normal, alpha: 1)
img2.drawInRect(rect, blendMode: .Multiply, alpha: 1)
// grab the finished image and return it
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Answer 2

Swift 3 Extension (thx to #Kex):
extension UIImage{
class func multiply(image:UIImage, color:UIColor) -> UIImage? {
let rect = CGRect(origin: .zero, size: image.size)
//image colored
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//image multiply
UIGraphicsBeginImageContextWithOptions(image.size, true, 0)
let context = UIGraphicsGetCurrentContext()
// fill the background with white so that translucent colors get lighter
context!.setFillColor(UIColor.white.cgColor)
context!.fill(rect)
image.draw(in: rect, blendMode: .normal, alpha: 1)
coloredImage?.draw(in: rect, blendMode: .multiply, alpha: 1)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result
}
}
Example:
let image = UIImage.multiply(image: sourceImage, color: UIColor.red)

Answer 3

With iOS10 you can now use UIGraphicsImageRenderer to add a partial multiply effect as easy as this:
extension UIImage {
func tinted(_ color: UIColor, percentageFromBottom: CGFloat) -> UIImage? {
let imageRect = CGRect(origin: .zero, size: size)
let colorRect = CGRect(x: 0, y: (1.0 - percentageFromBottom) * size.height, width: size.width, height: percentageFromBottom * size.height)
let renderer = UIGraphicsImageRenderer(size: size)
let tintedImage = renderer.image { context in
color.set()
context.fill(colorRect)
draw(in: imageRect, blendMode: .multiply, alpha: 1)
}
return tintedImage
}
}
You can then use it like this to multiply the lower third of the original with a red multiply:
UIImage(named: "trees")?.tinted(.red, percentageFromBottom: 0.33)
Which results in this: