How to edit high resolution images with Core Graphics?

Question

I'm trying to draw a path on a high resolution image, that's nothing complicated for an iPhone but if I add shadow to my path everything lags. It lags only when I work on images with a certain resolution (2000 x 3000) even less.

The Storyboard vies are:

-Scroll View
  -Image View
  -Draw View

So I have the DrawingView on top of the ImageView when I need to draw.
So the ImageView and the DrawView (view.bounds.size) have the same resolution as the image (e.g. 2000 x 3000) (there's the problem).
I'm drawing on a view with a high resolution.

I'm not directly calling drawRect: but only calling setNeedsDisplay() inside touchesBegan() and touchesMoved() after doing some operations (path.moveToPoint, path.addCurveToPoint, array operations) and adding points to my array.

In drawRect: I essentially have:

override func drawRect(rect: CGRect) {
        print(self.bounds.size)
        UIColor.greenColor().setStroke()
        path.lineCapStyle = .Round
        path.lineJoinStyle = .Round
        path.lineWidth = 60.0
        context = UIGraphicsGetCurrentContext()!
        CGContextAddPath(context, path.CGPath)
        CGContextSetShadowWithColor(context, CGSizeZero, 14.0, UIColor.whiteColor().CGColor)  // <-- with this shadow it lags a lot.
        path.stroke()
    }

My path is a UIBezierPath().

Any ideas to improve the speed?

Update: I followed what @brimstone said. I now have ImageView with a lower resolution, but have to apply my drawn path to the high resolution image.
(I'm trying to hand crop an image with the path that the user draws)
In this code I already got my closed path:

    let layer = CAShapeLayer()
    layer.path = path.CGPath
    self.imageToEditView.layer.mask = layer
    UIGraphicsBeginImageContext(self.imageEdited.size)
    self.imageToEditView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    let croppedCGImage = CGImageCreateWithImageInRect(image.CGImage!, CGPathGetBoundingBox(path.CGPath))
    let croppedImage = UIImage(CGImage: croppedCGImage!)
    self.imageToEditView.image = croppedImage
    self.imageToEditView.layer.mask = nil

imageToEditView.bounds.size = low resolution
imageEdited.size = high resolution

I need to set the hight resolution (I think) when i renderInContext. But how can I change the resolution of the imageView now?

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Try downsizing it for the user to draw over (doesn't make a huge difference on small iPhone screens for user experience), then apply the edits to the high-res image.

To downsize images, either use UIImagePNGRepresentation, which may make your image sufficiently smaller, or (if you're still having memory issues), try using techniques in this tutorial and this answer to make it even smaller.

Then, you can take the content of what they've drawn and apply it to the high-res image.

Alternatively, look at high-res optimisation techniques by Apple: https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html

edited May 23 '17 at 12:16

Community

1
1

answered May 04 '16 at 22:10

brimstone

3,370
3
28
49

Thank you for the answer, I'll check it Friday. Will I be able to apply the content of my drawn from the small resolution to the higher one? – DanielZanchi May 04 '16 at 22:17
If your drawView is separate from your image view, you can have the user draw whatever, then apply what they've drawn to the high-res image. It doesn't matter about the low-res image if it's just in the background of them drawing. – brimstone May 04 '16 at 22:18
I'm having some problems to apply the path to the high resolution image. I updated the answer – DanielZanchi May 06 '16 at 08:28

How to edit high resolution images with Core Graphics?

1 Answers1