uiviewuiimageextension-methodscalayeruigraphicscontext

How to save a layered image using a extension function


I am using a extension function to save a uiview as a uiimage. The code works to save the uiimage. However what I am trying to do is save a transparent image over the image being saved to the photo gallery. So I am trying to save a layered image using a extension function. Right now only the uiivew is being save and the 2nd layer is not being saved.

    class ViewController: UIViewController,UINavigationControllerDelegate {
    @IBAction func press(_ sender: Any) {
        let jake = drawingView.takeSnapshotOfView(view: drawingView)
              guard let selectedImage = jake else {
                              print("Image not found!")
                              return
                 }
                 UIImageWriteToSavedPhotosAlbum(selectedImage, self, #selector(image(_:didFinishSavingWithError:contextInfo:)), nil)
    }}

  func takeSnapshotOfView(view:UIView) -> UIImage? {
            UIGraphicsBeginImageContext(CGSize(width: view.frame.size.width, height: view.frame.size.height))
            view.drawHierarchy(in: CGRect(x: 0.0, y: 0.0, width: view.frame.size.width, height: view.frame.size.height), afterScreenUpdates: true)


            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

                let star:UIImage = UIImage(named: "e.png")!
                            let newSize = CGSize(width: star.size.width, height: star.size.height  )

                            UIGraphicsBeginImageContextWithOptions(newSize, false, star.scale)

                            star.draw(in: CGRect(x: newSize.width/12,
                                                 y: newSize.height/8,
                                                 width: newSize.width/1.2,
                                                 height: newSize.height/1.2),
                                      blendMode:CGBlendMode.normal, alpha:1)




                            UIGraphicsEndImageContext()

            return image
        }

Solution

  • Here is a UIView extension that takes in CGRect and UIImage, and alternitavely you can also supply it another CGRect or CGSize to make it more dynamic for the watermark placement/size

    extension UIView {        
        /// Takes a screenshot of a UIView, with an option to clip to view bounds and place a waterwark image 
        /// - Parameter rect: offset and size of the screenshot to take
        /// - Parameter clipToBounds: Bool to check where self.bounds and rect intersect and adjust size so there is no empty space
        /// - Parameter watermark: UIImage of the watermark to place on top
        func screenshot(for rect: CGRect, clipToBounds: Bool = true, with watermark: UIImage? = nil) -> UIImage {
            var imageRect = rect
            if clipToBounds {
                imageRect = bounds.intersection(rect)
            }
            return UIGraphicsImageRenderer(bounds: imageRect).image { _ in
            drawHierarchy(in: CGRect(origin: .zero, size: bounds.size), afterScreenUpdates: true)
            watermark?.draw(in: CGRect(origin: imageRect.origin, size: CGSize(width: 32, height: 32))) // update origin to place watermark where you want, with this update it will place it in top left or screenshot.
            }
        }
    }
    

    You can call it like so:

    let image = self.view.screenshot(for: CGRect(x: 0, y: 0, width: 200, height: 200), with: UIImage(named: "star"))
    

    This will work for all subviews of the view that calls screenshot(...)

    For a anyone using the above extension, I added additional info in this answer