Take a Screenshot of the entire contents of a UICollectionView

Question

The app I'm working on uses collection view cells to display data to the user. I want the user to be able to share the data that's contained in the cells, but there are usually too many cells to try to re-size and fit onto a single iPhone-screen-sized window and get a screenshot.

So the problem I'm having is trying to get an image of all the cells in a collection view, both on-screen and off-screen. I'm aware that off-screen cells don't actually exist, but I'd be interested in a way to kind of fake an image and draw in the data (if that's possible in swift).

In short, is there a way to programmatically create an image from a collection view and the cells it contains, both on and off screen with Swift?

Answer 1

Update

If memory is not a concern :

mutating func screenshot(scale: CGFloat) -> UIImage {
    let currentSize = frame.size
    let currentOffset = contentOffset // temp store current offset

    frame.size = contentSize
    setContentOffset(CGPointZero, animated: false)        

    // it might need a delay here to allow loading data.

    let rect = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
    UIGraphicsBeginImageContextWithOptions(rect.size, false, UIScreen.mainScreen().scale)
    self.drawViewHierarchyInRect(rect, afterScreenUpdates: true)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    frame.size = currentSize
    setContentOffset(currentOffset, animated: false)

    return resizeUIImage(image, scale: scale)        
}

---

This works for me:

github link -> contains up to date code

getScreenshotRects creates the offsets to which to scroll and the frames to capture. (naming is not perfect)

takeScreenshotAtPoint scrolls to the point, sets a delay to allow a redraw, takes the screenshot and returns this via completion handler.

stitchImages creates a rect with the same size as the content and draws all images in them.

makeScreenshots uses the didSet on a nested array of UIImage and a counter to create all images while also waiting for completion. When this is done it fires it own completion handler.

Basic parts :

• scroll collectionview -> works
• take screenshot with delay for a redraw -> works
• crop images that are overlapping -> apparently not needed
• stitch all images -> works
• basic math -> works
• maybe freeze screen or hide when all this is happening (this is not in my answer)

Code :

protocol ScrollViewImager {

    var bounds : CGRect { get }

    var contentSize : CGSize { get }

    var contentOffset : CGPoint { get }

    func setContentOffset(contentOffset: CGPoint, animated: Bool)

    func drawViewHierarchyInRect(rect: CGRect, afterScreenUpdates: Bool) -> Bool
}

extension ScrollViewImager {

    func screenshot(completion: (screenshot: UIImage) -> Void) {

        let pointsAndFrames = getScreenshotRects()
        let points = pointsAndFrames.points
        let frames = pointsAndFrames.frames

        makeScreenshots(points, frames: frames) { (screenshots) -> Void in
            let stitched = self.stitchImages(images: screenshots, finalSize: self.contentSize)
            completion(screenshot: stitched!)
        }

    }

    private func makeScreenshots(points:[[CGPoint]], frames : [[CGRect]],completion: (screenshots: [[UIImage]]) -> Void) {

        var counter : Int = 0

        var images : [[UIImage]] = [] {
            didSet {
                if counter < points.count {
                    makeScreenshotRow(points[counter], frames : frames[counter]) { (screenshot) -> Void in
                        counter += 1
                        images.append(screenshot)
                    }
                } else {
                    completion(screenshots: images)
                }
            }
        }

        makeScreenshotRow(points[counter], frames : frames[counter]) { (screenshot) -> Void in
            counter += 1
            images.append(screenshot)
        }

    }

    private func makeScreenshotRow(points:[CGPoint], frames : [CGRect],completion: (screenshots: [UIImage]) -> Void) {

        var counter : Int = 0

        var images : [UIImage] = [] {
            didSet {
                if counter < points.count {
                    takeScreenshotAtPoint(point: points[counter]) { (screenshot) -> Void in
                        counter += 1
                        images.append(screenshot)
                    }
                } else {
                    completion(screenshots: images)
                }
            }
        }

        takeScreenshotAtPoint(point: points[counter]) { (screenshot) -> Void in
            counter += 1
            images.append(screenshot)
        }

    }

    private func getScreenshotRects() -> (points:[[CGPoint]], frames:[[CGRect]]) {

        let vanillaBounds = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)

        let xPartial = contentSize.width % bounds.size.width
        let yPartial = contentSize.height % bounds.size.height

        let xSlices = Int((contentSize.width - xPartial) / bounds.size.width)
        let ySlices = Int((contentSize.height - yPartial) / bounds.size.height)

        var currentOffset = CGPoint(x: 0, y: 0)

        var offsets : [[CGPoint]] = []
        var rects : [[CGRect]] = []

        var xSlicesWithPartial : Int = xSlices

        if xPartial > 0 {
            xSlicesWithPartial += 1
        }

        var ySlicesWithPartial : Int = ySlices

        if yPartial > 0 {
            ySlicesWithPartial += 1
        }

        for y in 0..<ySlicesWithPartial {

            var offsetRow : [CGPoint] = []
            var rectRow : [CGRect] = []
            currentOffset.x = 0

            for x in 0..<xSlicesWithPartial {

                if y == ySlices && x == xSlices {
                    let rect = CGRect(x: bounds.width - xPartial, y: bounds.height - yPartial, width: xPartial, height: yPartial)
                    rectRow.append(rect)

                } else if y == ySlices {
                    let rect = CGRect(x: 0, y: bounds.height - yPartial, width: bounds.width, height: yPartial)
                    rectRow.append(rect)

                } else if x == xSlices {
                    let rect = CGRect(x: bounds.width - xPartial, y: 0, width: xPartial, height: bounds.height)
                    rectRow.append(rect)

                } else {
                    rectRow.append(vanillaBounds)
                }

                offsetRow.append(currentOffset)

                if x == xSlices {
                    currentOffset.x = contentSize.width - bounds.size.width
                } else {
                    currentOffset.x = currentOffset.x + bounds.size.width
                }
            }
            if y == ySlices {
                currentOffset.y = contentSize.height - bounds.size.height
            } else {
                currentOffset.y = currentOffset.y + bounds.size.height
            }

            offsets.append(offsetRow)
            rects.append(rectRow)

        }

        return (points:offsets, frames:rects)

    }

    private func takeScreenshotAtPoint(point point_I: CGPoint, completion: (screenshot: UIImage) -> Void) {
        let rect = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
        let currentOffset = contentOffset
        setContentOffset(point_I, animated: false)

        delay(0.001) {

            UIGraphicsBeginImageContextWithOptions(rect.size, false, UIScreen.mainScreen().scale)
            self.drawViewHierarchyInRect(rect, afterScreenUpdates: true)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()


            self.setContentOffset(currentOffset, animated: false)
            completion(screenshot: image)
        }
    }

    private func delay(delay:Double, closure:()->()) {
        dispatch_after(
            dispatch_time(
                DISPATCH_TIME_NOW,
                Int64(delay * Double(NSEC_PER_SEC))
            ),
            dispatch_get_main_queue(), closure)
    }


    private func crop(image image_I:UIImage, toRect rect:CGRect) -> UIImage? {

        guard let imageRef: CGImageRef = CGImageCreateWithImageInRect(image_I.CGImage, rect) else {
            return nil
        }
        return UIImage(CGImage:imageRef)
    }

    private func stitchImages(images images_I: [[UIImage]], finalSize : CGSize) -> UIImage? {

        let finalRect = CGRect(x: 0, y: 0, width: finalSize.width, height: finalSize.height)

        guard images_I.count > 0 else {
            return nil
        }

        UIGraphicsBeginImageContext(finalRect.size)

        var offsetY : CGFloat = 0

        for imageRow in images_I {

            var offsetX : CGFloat = 0

            for image in imageRow {

                let width = image.size.width
                let height = image.size.height


                let rect = CGRect(x: offsetX, y: offsetY, width: width, height: height)
                image.drawInRect(rect)

                offsetX += width

            }

            offsetX = 0

            if let firstimage = imageRow.first {
                offsetY += firstimage.size.height
            } // maybe add error handling here
        }

        let stitchedImages = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return stitchedImages
    }
}

extension UIScrollView : ScrollViewImager {

}

Answer 2

Draw the bitmap data of your UICollectionView into a UIImage using UIKit graphics functions. Then you'll have a UIImage that you could save to disk or do whatever you need with it. Something like this should work:

// your collection view
@IBOutlet weak var myCollectionView: UICollectionView!

//...

let image: UIImage!

// draw your UICollectionView into a UIImage
UIGraphicsBeginImageContext(myCollectionView.frame.size) 

myCollectionView.layer.renderInContext(UIGraphicsGetCurrentContext()!)

image = UIGraphicsGetImageFromCurrentImageContext()  

UIGraphicsEndImageContext()

Answer 3

For swift 4 to make screenshot of UICollectionView

func makeScreenShotToShare()-> UIImage{
        UIGraphicsBeginImageContextWithOptions(CGSize.init(width: self.colHistory.contentSize.width, height: self.colHistory.contentSize.height + 84.0), false, 0)
        colHistory.scrollToItem(at: IndexPath.init(row: 0, section: 0), at: .top, animated: false)
        colHistory.layer.render(in: UIGraphicsGetCurrentContext()!)
        let row = colHistory.numberOfItems(inSection: 0)
        let numberofRowthatShowinscreen = self.colHistory.size.height / (self.arrHistoryData.count == 1 ? 130 : 220)
        let scrollCount = row / Int(numberofRowthatShowinscreen)

        for  i in 0..<scrollCount {
            colHistory.scrollToItem(at: IndexPath.init(row: (i+1)*Int(numberofRowthatShowinscreen), section: 0), at: .top, animated: false)
            colHistory.layer.render(in: UIGraphicsGetCurrentContext()!)
        }

        let image:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext();
        return image
    }