cropping image by using a custom view - ios

Question

I'm trying to crop an image by using a custom view. I have two view controller each of them are ViewController and ResultViewController. viewController has a button and an mageView and the other one has an imageView. when I crop on the ViewController, the results are out of the transparent custom view on the ResultViewController. I don't know where I'm doing wrong or missing. I have changed content mode of the image view to aspect fill, aspect fit, scale to fit and center but the results aren't what I want. Any help would be really appreciated.
I read the official document : here
import UIKit
class ViewController: UIViewController {
let resultVC = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "resultVC") as! ResultViewController
var rectangleView: UIView! = UIView(frame: CGRect(x: 100,y: 200,width: 100,height: 100))
// this is the transparent custom view as a mask.
#IBAction func okayButton(_ sender: Any) {
resultVC.resultImage = cropImage(imageView.image!, toRect: rectangleView.frame, viewWidth: self.view.frame.size.width, viewHeight: self.view.frame.size.height)
print(rectangleView.frame)
present(resultVC, animated: true)
}
#IBOutlet weak var imageView: UIImageView!
func cropImage(_ inputImage: UIImage, toRect cropRect: CGRect, viewWidth: CGFloat, viewHeight: CGFloat) -> UIImage?
{
let imageViewScale = max(inputImage.size.width / viewWidth,
inputImage.size.height / viewHeight)
// Scale cropRect to handle images larger than shown-on-screen size
let cropZone = CGRect(x:cropRect.origin.x * imageViewScale,
y:cropRect.origin.y * imageViewScale,
width:cropRect.size.width * imageViewScale,
height:cropRect.size.height * imageViewScale)
// Perform cropping in Core Graphics
guard let cutImageRef: CGImage = inputImage.cgImage?.cropping(to:cropZone)
else {
return nil
}
// Return image to UIImage
let croppedImage: UIImage = UIImage(cgImage: cutImageRef)
return croppedImage
}
override func viewDidLoad() {
super.viewDidLoad()
let imageFile = UIImage(named: "c.png")
// Do any additional setup after loading the view.
imageView.image = imageFile
view.addSubview(rectangleView)
rectangleView.backgroundColor = UIColor.init(white: 1, alpha: 0.5)
}
}
//ResultViewController
import UIKit
class ResultViewController: UIViewController {
var resultImage:UIImage!
#IBOutlet weak var resultImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
resultImageView.image = resultImage
// Do any additional setup after loading the view.
}
}
before cropping1
after cropping2

Answer 1

There is an important point here is you have to convert all the frame's rects into the same coordinate system before cropping.
For easy, I'll choose the image as the base coordinate system with the origin is the TOP-LEFT point of the image. Please note that the image I mention here is not the same with the imageView which is used to display the image.
For the crop function, I'll use the one I'm using for my library
public func crop(image: UIImage, toRect rect: CGRect) -> UIImage {
let orientation = image.imageOrientation
let scale = image.scale
var targetRect = CGRect()
switch orientation {
case .down:
targetRect.origin.x = (image.size.width - rect.maxX) * scale
targetRect.origin.y = (image.size.height - rect.maxY) * scale
targetRect.size.width = rect.width * scale
targetRect.size.height = rect.height * scale
case .right:
targetRect.origin.x = rect.minY * scale
targetRect.origin.y = (image.size.width - rect.maxX) * scale
targetRect.size.width = rect.height * scale
targetRect.size.height = rect.width * scale
case .left:
targetRect.origin.x = image.size.height - rect.maxY * scale
targetRect.origin.y = rect.minX * scale
targetRect.size.width = rect.height * scale
targetRect.size.height = rect.width * scale
default:
targetRect = CGRect(x: rect.origin.x * scale,
y: rect.origin.y * scale,
width: rect.width * scale,
height: rect.height * scale)
}
if let croppedCGImage = image.cgImage?.cropping(to: targetRect) {
return UIImage(cgImage: croppedCGImage, scale: scale, orientation: orientation)
}
return image
}
To use the function above correctly with your example, you have to change your implemetation to this. Please read the comments to get the idea.
#IBAction func okayButton(_ sender: Any) {
// Get the rectangeView's frame in the imageView's coordinate system
let rectangleViewRectInImageView = rectangleView.convert(rectangleView.bounds, to: imageView)
let imageWHRatio = imageView.image!.size.width / imageView.image!.size.height
let imageViewWHRatio = imageView.bounds.width / imageView.bounds.height
// We are going to calculate the frame of the displayed image content inside the imageView
var imageRectInImageView: CGRect = .zero
if imageWHRatio > imageViewWHRatio {
// White spaces in the top & bottom
imageRectInImageView = CGRect(
x: 0,
y: (imageView.bounds.height - imageView.bounds.width / imageWHRatio) / 2,
width: imageView.bounds.width,
height: imageView.bounds.width / imageWHRatio
)
} else {
// White spaces in the left & right
imageRectInImageView = CGRect(
x: (imageView.bounds.width - imageView.bounds.height * imageWHRatio) / 2,
y: 0,
width: imageView.bounds.height * imageWHRatio,
height: imageView.bounds.height
)
}
// How big the image are being scaled to fit the imageView's bound.
let imageScale = imageView.image!.size.width / imageRectInImageView.width
// The frame of the rectangeView in the displayed image content view's coordinate system
let toRect = CGRect(
x: (rectangleViewRectInImageView.minX - imageRectInImageView.minX) * imageScale,
y: (rectangleViewRectInImageView.minY - imageRectInImageView.minY) * imageScale,
width: rectangleViewRectInImageView.width * imageScale,
height: rectangleViewRectInImageView.height * imageScale)
// Now you have the frame of the rectangleView in proper coordinate system, so you can my method above safely
resultVC.resultImage = crop(image: imageView.image!, toRect: toRect)
print(rectangleView.frame)
present(resultVC, animated: true)
}
Please make sure that you have to select scaleAspectFill as the contentMode for the imageView to make it work correctly.