如何在使用Pan（平移）、Rotate（旋转）和Pinch（捏合）手势编辑过UIImage后进行保存

Question

我正在尝试使用UIPanGesture，UIRotateGesture和UIPinchGesture来实现编辑图像。编辑完成后，我希望保存已编辑的UIImage。

我已经完成了编辑图像的功能。

但是，我不知道如何像本机iOS相机应用程序一样完美地保存。

Pan Gesture运行良好。

我的问题在于旋转和缩放。

如何设置UIImage的中心锚点？

当我从变换信息中保存UIImage时，由于旋转和缩放，结果总是基于（0,0），因此它看起来与原图不同。

 @IBAction func showEditedImage(_ sender: Any) {


        let image = preview.image!
        var drawingRect : CGRect = CGRect.zero
        drawingRect.size = preview.frame.size

        let scale = transformedImg.frame.width / (preview.image?.size.width)!
        let height = (preview.image?.size.height)! * scale

        UIGraphicsBeginImageContextWithOptions(CGSize(width: transformedImg.frame.width, height: height), false, 0)

        let context = UIGraphicsGetCurrentContext()
        context!.concatenate(preview.transform)

        image.draw(in: CGRect(x: 0, y: 0, width: transformedImg.frame.width, height: height))
        resultsImg = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        transformedImg.image = resultsImg
    }

这是我的所有代码。

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var preview: UIImageView!
    @IBOutlet weak var frame: UIView!
    @IBOutlet weak var transformedImg: UIImageView!

    //save edited image
    var resultsImg : UIImage!

    override func viewDidLoad() {

        resultsImg = UIImage()
        super.viewDidLoad()
    }


       @IBAction func showEditedImage(_ sender: Any) {


    let image = preview.image!
    var drawingRect : CGRect = CGRect.zero
    drawingRect.size = preview.frame.size

    let scale = transformedImg.frame.width / (preview.image?.size.width)!
    let height = (preview.image?.size.height)! * scale

    UIGraphicsBeginImageContextWithOptions(CGSize(width: transformedImg.frame.width, height: height), false, 0)

    let context = UIGraphicsGetCurrentContext()
    context!.concatenate(preview.transform)

    image.draw(in: CGRect(x: 0, y: 0, width: transformedImg.frame.width, height: height))
    resultsImg = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();

    transformedImg.image = resultsImg
}

    @IBAction func pinchaction(_ sender: UIPinchGestureRecognizer) {

        preview.transform = preview.transform.scaledBy(x: sender.scale, y: sender.scale)

        sender.scale = 1
    }

    @IBAction func rotateaction(_ sender: UIRotationGestureRecognizer) {

        let rotate = sender.rotation
        preview.transform = preview.transform.rotated(by: rotate)


        sender.rotation = 0

    }

    @IBAction func panaction(_ sender: UIPanGestureRecognizer) {

        let points = sender.translation(in: self.frame)
        preview.transform = preview.transform.translatedBy(x: points.x, y: points.y)

        let translatedCenter = CGPoint(x:self.frame.center.x + points.x, y:self.frame.center.y + points.y)

        sender.setTranslation(CGPoint.zero, in: self.frame)

    }



}

环境：XCode9 + Swift 4

更新于2017年10月14日

我解决了我的问题

 @IBAction func showEditedImage(_ sender: Any) {

        let image = preview.image!
        var drawingRect : CGRect = CGRect.zero
        drawingRect.size = preview.frame.size

        let scale = transformedImg.frame.width / (preview.image?.size.width)!
        let height = (preview.image?.size.height)! * scale


        UIGraphicsBeginImageContextWithOptions(CGSize(width: transformedImg.frame.width, height: height), false, 0)

        let context = UIGraphicsGetCurrentContext()

        //Set Center Position before Scale, Rotate Image
        context?.translateBy(x: transformedImg.frame.width / 2, y: height / 2)

        //Applied Translate, Scale, Rotate
        context!.concatenate(preview.transform)

        context?.translateBy(x: -(transformedImg.frame.width / 2), y: -(height / 2))

        image.draw(in: CGRect(x: 0, y: 0, width: transformedImg.frame.width, height: height))
        resultsImg = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();

        transformedImg.image = resultsImg
    }

- Shawn Baek

Answer 1

我已经在Swift 2.3中实现了此功能，因此您可以在将其转换为Swift 4之后使用它。

fun SaveImage()
{
    if myImageView != nil
    {
       // You should hide here your Buttons,Labels, etc.

    let layer = UIApplication.sharedApplication().keyWindow!.layer
    let scale = UIScreen.mainScreen().scale
    UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, scale);

    layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let screenshot = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

       // Now here you can UnHide(Show) your Buttons,Labels,etc
    UIImageWriteToSavedPhotosAlbum(screenshot, nil, nil, nil)
    let alert = UIAlertView(title: "Alert !!",
        message: "Your image has been saved to Photo Library",
        delegate: nil,
        cancelButtonTitle: "OK")
    alert.show()

    }
    else
    {
        let alert = UIAlertView(title: "Alert !!",
            message: "Please first Select/Capture Image",
            delegate: nil,
            cancelButtonTitle: "OK")
        alert.show()
    }

}

- Zee

---

谢谢回复~！ - Shawn Baek

是的，你帮了我。谢谢。但我的问题是如何将图像的原点设置为中心位置并使用变换方法旋转图像。我尝试过旋转变换，但它是以图像的左上角为基础旋转的，而不是以中心为基础。 - Shawn Baek

Answer 2

我有一个名为myView的UIIView，具有透明背景，并将UIImageView添加到myView作为子视图，然后我在myView上应用UIRotationGestureRecognizer，以旋转我的图像。这是我的UIRotationGestureRecognizer的@IBAction函数...

@IBAction func rotateGesture(sender: UIRotationGestureRecognizer) {
    if let view = sender.view {
        view.transform = CGAffineTransformRotate(view.transform, sender.rotation)
        sender.rotation = 0
    }
}

- Zee

Answer 3

我曾经遇到过类似的问题，不同之处在于我不想将编辑后的图像保存在与原始图像相同的比例中。

在尝试适应上述解决方案之后，我想到了更简单的方法，即对包含旋转/缩放UIImageView的UIView进行快照。

我使用了这里提出的解决方案的一个版本：https://dev59.com/4nE95IYBdhLWcg3wp_qn#18925301

在Swift 4中：

private func getEditedImage(container: UIView) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(container.bounds.size, false, 0.0)
    drawHierarchy(in: container.bounds, afterScreenUpdates: true)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

- Pacificana