Image in collectionView cell causing Terminated due to memory issue - ios

Question

I looked at several answers for this problem but none helped.
vc1 is a regular vc, I grab 20 images from firebase, in vc2 I use ARKit to display those images upon user selection. I have a collectionView in vc2 that paginates 20 more images from firebase. The problem is when the next 20 images are loading and I start scrolling, the app crashes with Message from debugger: Terminated due to memory issue. When scrolling those new images, I look at the memory graph and it shoots up to 1 gig, so that's the reason for the crash. ARKit and the nodes I have floating around also contribute to the memory bump but they are not the reason for the crash as stated below.
1- Inside the cell I use SDWebImage to display the image inside the imageView. Once I comment out SDWebImage everything works, scrolling is smooth, and no more crashes but of course I can't see the image. I switched to URLSession.shared.dataTask and the same memory issue reoccurs.
2- The images were initially taken with the iPhone full screen camera and saved with jpegData(compressionQuality: 0.3). The cell size is 40x40. Inside the the SDWebImage completion block I tried to resize the image but the memory crash still persists.
3- I used Instruments > Leaks to look for memory leaks and a few Foundation leaks appeared but when I dismiss vc2 Deinit always runs. Inside vc2 there aren't any long running timers or loops and I use [weak self] inside all of the closures.
4- As I stated in the second point the problem is definitely the imageView/image because once I remove it from the process everything works fine. If I don't show any images everything works fine (40 red imageViews with no images inside of them will appear).
What can I do to fix this issue?
Paginating to pull more images
for child in snapshot.children.allObjects as! [DataSnapshot] {
guard let dict = child.value as? [String:Any] else { continue }
let post = Post(dict: dict)
datasource.append(post)
let lastIndex = datasource.count - 1
let indexPath = IndexPath(item: lastIndex, section: 0)
UIView.performWithoutAnimation {
collectionView.insertItems(at: [indexPath])
}
}
cellForItem:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: self.cellId, for: indexPath) as! PostCell
cell.resetAll()
cell.post = dataSource[indexPath.item]
return cell
}
PostCell
private lazy var imageView: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.layer.cornerRadius = 15
iv.layer.masksToBounds = true
iv.backgroundColor = .red
iv.isHidden = true
return iv
}()
private lazy var spinner: UIActivityIndicatorView = {
let actIndi = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.medium) // ...
}()
var post: Post? {
didSet {
guard let urlSr = post?.urlStr, let url = URL(string: urlSr) else { return }
spinner.startAnimating()
// if I comment this out everything works fine
imageView.sd_setImage(with: url, placeholderImage: placeHolderImage, options: [], completed: {
[weak self] (image, error, cache, url) in
// in here I tried resizing the image but no diff
DispatchQueue.main.async { [weak self] in
self?.showAll()
}
})
setAnchors()
}
}
func resetAll() {
spinner.stopAnimating()
imageView.image = nil
imageView.removeFromSuperView()
imageView.isHidden = true
}
func showAll() {
spinner.stopAnimating()
imageView.isHidden = false
}
func setAnchors() {
contentView.addSubview(imageView)
imageView.addSubview(cellSpinner)
// imageView is pinned to all sides
}

Answer 1

In the comments #matt was 100% correct , the problem was the images were too large for the collectionView at size 40x40, I needed to resize the images. For some reason the resize link in my question didn't work so I used this to resize image instead. I also used URLSession and this answer
I did it in 10 steps, all commented out
// 0. set this anywhere outside any class
let imageCache = NSCache<AnyObject, AnyObject>()
PostCell:
private lazy var imageView: UIImageView = { ... }()
private lazy var spinner: UIActivityIndicatorView = { ... }()
// 1. override prepareForReuse, cancel the task and set it to nil, and set the imageView.image to nil so that the wrong images don't appear while scrolling
override func prepareForReuse() {
super.prepareForReuse()
task?.cancel()
task = nil
imageView.image = nil
}
// 2. add a var to start/stop a urlSession when the cell isn't on screen
private var task: URLSessionDataTask?
var post: Post? {
didSet {
guard let urlStr = post?.urlStr else { return }
spinner.startAnimating()
// 3. crate the new image from this function
createImageFrom(urlStr)
setAnchors()
}
}
func createImageFrom(_ urlStr: String) {
if let cachedImage = imageCache.object(forKey: urlStr as AnyObject) as? UIImage {
// 4. if the image is in cache call this function to show the image
showAllAndSetImageView(with: cachedImage)
} else {
guard let url = URL(string: urlStr) else { return }
// 5. if the image is not in cache start a urlSession and initialize it with the task variable from step 2
task = URLSession.shared.dataTask(with: url, completionHandler: {
[weak self](data, response, error) in
if let error = error { return }
if let response = response as? HTTPURLResponse {
print("response.statusCode: \(response.statusCode)")
guard 200 ..< 300 ~= response.statusCode else { return }
}
guard let data = data, let image = UIImage(data: data) else { return }
// 6. add the image to cache
imageCache.setObject(image, forKey: photoUrlStr as AnyObject)
DispatchQueue.main.async { [weak self] in
// 7. call this function to show the image
self?.showAllAndSetImageView(with: image)
}
})
task?.resume()
}
}
func showAllAndSetImageView(with image: UIImage) {
// 8. resize the image
let resizedImage = resizeImageToCenter(image: image, size: 40) // can also use self.frame.height
imageView.image = resizeImage
showAll()
}
// 9. func to resize the image
func resizeImageToCenter(image: UIImage, size: CGFloat) -> UIImage {
let size = CGSize(width: size, height: size)
// Define rect for thumbnail
let scale = max(size.width/image.size.width, size.height/image.size.height)
let width = image.size.width * scale
let height = image.size.height * scale
let x = (size.width - width) / CGFloat(2)
let y = (size.height - height) / CGFloat(2)
let thumbnailRect = CGRect.init(x: x, y: y, width: width, height: height)
// Generate thumbnail from image
UIGraphicsBeginImageContextWithOptions(size, false, 0)
image.draw(in: thumbnailRect)
let thumbnail = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return thumbnail!
}
func resetAll() { ... }
func showAll() { ... }
func setAnchors() { ... }