Myujth

It is pretty easy to add border to UIImageView, using layers (borderWidth, borderColor etc.). Is there any possibility to add border to image, not to image view? Does somebody know?

Update:

I tried to follow the suggestion below und used extension. Thank you for that but I did not get the desired result. Here is my code. What is wrong?

import UIKit
 class ViewController: UIViewController 

 var imageView: UIImageView!
 var sizeW = CGFloat()
 var sizeH = CGFloat()

 override func viewDidLoad() 
 super.viewDidLoad()

 sizeW = view.frame.width
 sizeH = view.frame.height

 setImage()
 

 func setImage()

 //add image view
 imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: sizeW/2, height: sizeH/2))
 imageView.center = view.center
 imageView.tintColor = UIColor.orange
 imageView.contentMode = UIViewContentMode.scaleAspectFit

 let imgOriginal = UIImage(named: "plum")!.withRenderingMode(.alwaysTemplate)
 let borderImage = imgOriginal.imageWithBorder(width: 2, color: UIColor.blue)
 imageView.image = borderImage

 view.addSubview(imageView)

 






 extension UIImage 
 func imageWithBorder(width: CGFloat, color: UIColor) -> UIImage? 
 let square = CGSize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)
 let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
 imageView.contentMode = .center
 imageView.image = self
 imageView.layer.borderWidth = width
 imageView.layer.borderColor = color.cgColor
 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
 guard let context = UIGraphicsGetCurrentContext() else return nil 
 imageView.layer.render(in: context)
 let result = UIGraphicsGetImageFromCurrentImageContext()
 UIGraphicsEndImageContext()
 return result
 

The second image with the red border is more or less what I need:

Here is the way how you can achieve that:

Add below extension to your code:

extension UIImage 
 func imageWithBorder(width: CGFloat, color: UIColor) -> UIImage? 
 let square = CGSize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)
 let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
 imageView.contentMode = .center
 imageView.image = self
 imageView.layer.borderWidth = width
 imageView.layer.borderColor = color.cgColor
 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
 guard let context = UIGraphicsGetCurrentContext() else return nil 
 imageView.layer.render(in: context)
 let result = UIGraphicsGetImageFromCurrentImageContext()
 UIGraphicsEndImageContext()
 return result
 

And you can use it this way:

let imgOriginal = UIImage.init(named: "Richie_Rich")
img.image = imgOriginal?.imageWithBorder(width: 2, color: UIColor.blue)

And result will be:

Here is the original post which is with Round corners but I removed that code because you did't ask for it.

Borders to the images belongs to image processing area of iOS. It's not easy as borders for a UIView, It's pretty deep but if you're willing to go the distance, here is a library and a hint for the journey
https://github.com/BradLarson/GPUImage

try using GPUImageThresholdEdgeDetectionFilter

or try OpenCV https://docs.opencv.org/2.4/doc/tutorials/ios/image_manipulation/image_manipulation.html

Use this simple extension for UIImage

extension UIImage 

 func outline() -> UIImage? 

 UIGraphicsBeginImageContext(size)
 let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
 self.draw(in: rect, blendMode: .normal, alpha: 1.0)
 let context = UIGraphicsGetCurrentContext()
 context?.setStrokeColor(red: 1.0, green: 0.5, blue: 1.0, alpha: 1.0)
 context?.setLineWidth(5.0)
 context?.stroke(rect)
 let newImage = UIGraphicsGetImageFromCurrentImageContext()
 UIGraphicsEndImageContext()

 return newImage

 

It will give you an image with pink border.

Here is a UIImage extension I wrote in Swift 4. As IOSDealBreaker said this is all about image processing, and some particular cases may occur. You should have a png image with a transparent background, and manage the size if larger than the original.

• First get a colorised "shade" version of your image.


• Then draw and redraw the shade image all around a given origin point (In our case around (0,0) at a distance that is the border thickness)


• Draw your source image at the origin point so that it appears on the foreground.


• You may have to enlarge your image if the borders go out of the original rect.

My method uses a lot of util methods and class extensions. Here is some maths to rotate a vector (which is actually a point) around another point: Rotating a CGPoint around another CGPoint

extension CGPoint 
 func rotated(around origin: CGPoint, byDegrees: CGFloat) -> CGPoint 
 let dx = self.x - origin.x
 let dy = self.y - origin.y
 let radius = sqrt(dx * dx + dy * dy)
 let azimuth = atan2(dy, dx) // in radians
 let newAzimuth = azimuth + (byDegrees * CGFloat.pi / 180.0) // convert it to radians
 let x = origin.x + radius * cos(newAzimuth)
 let y = origin.y + radius * sin(newAzimuth)
 return CGPoint(x: x, y: y)
 

I wrote my custom CIFilter to colorise an image which have a transparent background: Colorize a UIImage in Swift

class ColorFilter: CIFilter 
 var inputImage: CIImage?
 var inputColor: CIColor?
 private let kernel: CIColorKernel = 
 let kernelString =
 """
 kernel vec4 colorize(__sample pixel, vec4 color) 
 pixel.rgb = pixel.a * color.rgb;
 pixel.a *= color.a;
 return pixel;
 
 """
 return CIColorKernel(source: kernelString)!
 ()

 override var outputImage: CIImage? 
 guard let inputImage = inputImage, let inputColor = inputColor else return nil 
 let inputs = [inputImage, inputColor] as [Any]
 return kernel.apply(extent: inputImage.extent, arguments: inputs)
 


extension UIImage {
 func colorized(with color: UIColor) -> UIImage 
 guard let cgInput = self.cgImage else 
 return self
 
 let colorFilter = ColorFilter()
 colorFilter.inputImage = CIImage(cgImage: cgInput)
 colorFilter.inputColor = CIColor(color: color)

 if let ciOutputImage = colorFilter.outputImage 
 let context = CIContext(options: nil)
 let cgImg = context.createCGImage(ciOutputImage, from: ciOutputImage.extent)
 return UIImage(cgImage: cgImg!, scale: self.scale, orientation: self.imageOrientation).alpha(color.rgba.alpha).withRenderingMode(self.renderingMode)
 else 
 return self
 
 

At this point you should have everything to make this work:

extension UIImage 
 func stroked(with color: UIColor, size: CGFloat) -> UIImage 
 let strokeImage = self.colorized(with: color)
 let oldRect = CGRect(x: size, y: size, width: self.size.width, height: self.size.height).integral
 let newSize = CGSize(width: self.size.width + (2*size), height: self.size.height + (2*size))
 let translationVector = CGPoint(x: size, y: 0)

 UIGraphicsBeginImageContextWithOptions(newSize, false, self.scale)
 if let context = UIGraphicsGetCurrentContext() 
 context.interpolationQuality = .high

 let step = 10 // reduce the step to increase quality
 for angle in stride(from: 0, to: 360, by: step) 
 let vector = translationVector.rotated(around: .zero, byDegrees: CGFloat(angle))
 let transform = CGAffineTransform(translationX: vector.x, y: vector.y)
 context.concatenate(transform)
 context.draw(strokeImage.cgImage!, in: oldRect)
 let resetTransform = CGAffineTransform(translationX: -vector.x, y: -vector.y)
 context.concatenate(resetTransform)
 
 context.draw(self.cgImage!, in: oldRect)

 let newImage = UIImage(cgImage: context.makeImage()!, scale: self.scale, orientation: self.imageOrientation)
 UIGraphicsEndImageContext()

 return newImage.withRenderingMode(self.renderingMode)
 
 UIGraphicsEndImageContext()
 return self