如何截取UIScrollView可见区域的屏幕截图？

Question

如何截取UIScrollView可见区域的屏幕截图？

14

如何对UIScrollView的可见区域进行1:1的截屏？内容可能比UIScrollView的边界大或小，也可能被遮挡一半（我已经为较小的内容实现了自定义滚动，因此它不在左上角）。我在模拟器上取得了所需的结果，但在设备本身上没有成功：

-(UIImage *)imageFromCombinedContext:(UIView *)background {
      UIImage *image;
      CGRect vis = background.bounds;
      CGSize size = vis.size;
      UIGraphicsBeginImageContext(size);
      [background.layer affineTransform];
      [background.layer renderInontext:UIGraphicsGetCurrentContext()];
      image = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
      CGImageRef imref = CGImageCreateWithImageInRect([image CGImage], vis);
      image = [UIImage imageWithCGImage:imref];
      CGImageRelease(imref);
      return image;
}

- Concuror

9个回答

6

以下是 Abduliam Rehmanius 答案的 Swift 版本。

func screenshot() -> UIImage {

        UIGraphicsBeginImageContextWithOptions(self.scrollCrop.bounds.size, true, UIScreen.mainScreen().scale);
        //this is the key
        let offset:CGPoint = self.scrollCrop.contentOffset;
        CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -offset.x, -offset.y);
        self.scrollCrop.layer.renderInContext(UIGraphicsGetCurrentContext()!);
        let visibleScrollViewImage: UIImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return visibleScrollViewImage;
    }

Swift 4版本：

func screenshot() -> UIImage {
UIGraphicsBeginImageContextWithOptions(self.scrollCrop.bounds.size, false, UIScreen.main.scale)
        let offset = self.scrollCrop.contentOffset
        let thisContext = UIGraphicsGetCurrentContext()
        thisContext?.translateBy(x: -offset.x, y: -offset.y)
        self.scrollCrop.layer.render(in: thisContext!)
        let visibleScrollViewImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
return visibleScrollViewImage
}

- Deepak Thakur

4

将Abduliam Rehmanius的答案翻译成Swift 4版本的UIScrollView扩展，无需缓慢裁剪。

extension UIScrollView {

    var snapshotVisibleArea: UIImage? {
        UIGraphicsBeginImageContext(bounds.size)
        UIGraphicsGetCurrentContext()?.translateBy(x: -contentOffset.x, y: -contentOffset.y)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

- Stoyan

4

我已经自己找到了一个解决方案-我对整个视图进行了截图，然后将其裁剪到UIScrollView框架的大小和位置。

-(UIImage *)imageFromCombinedContext:(UIView *)background 
{
      UIImage *image;
      CGSize size = self.view.frame.size;
      UIGraphicsBeginImageContext(size);
      [background.layer affineTransform];
      [self.view.layer.layer renderInContext:UIGraphicsGetCurrentContext()];
      image = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
      CGImageRef imgRef = CGImageCreateWithImageInRect([image CGImage],background.frame);
      image = [UIImage imageWithCGImage:imref];
      CGImageRelease(imref);
      return image;
}

- Concuror

我还需要等待20个小时。 - Concuror

2

这对于大型滚动视图来说不是非常低效吗？@AbduliamRehmanius的答案有什么问题吗？ - deanWombourne

太喜欢了！！非常感谢！！ - holierthanthou84

1

@AbuliamRegmanius 的答案更好！它更有效率。 - regetskcob

3

Jeffery Sun已经给出了正确的答案。只需要将您的滚动视图放在另一个视图内。获取容器视图以在上下文中呈现。完成。

在下面的代码中，cropView包含要捕获的滚动视图。解决方案真的很简单。

据我理解，也是我找到这个页面的原因，滚动视图的整个内容都不需要 - 只需要可见部分。

func captureCrop() -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.cropView.frame.size, true, 0.0)
    self.cropView.layer.renderInContext(UIGraphicsGetCurrentContext())
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image;
}

- AutomatonTec

0

在@Concuror代码中更新Swift 3+、4

func getImage(fromCombinedContext background: UIView) -> UIImage {
        var image: UIImage?
        let size: CGSize = view.frame.size
        UIGraphicsBeginImageContext(size)
        background.layer.affineTransform()
        view.layer.render(in: UIGraphicsGetCurrentContext()!)
        image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        let imgRef = image?.cgImage?.cropping(to: background.frame)
        image = UIImage(cgImage: imgRef!)
        // CGImageRelease(imgRef!) // Removing on Swift - 'CGImageRelease' is unavailable: Core Foundation objects are automatically memory managed
        return image ?? UIImage()
    }

- Tuan Huynh

0

很多答案使用 UIGraphicsBeginImageContext（iOS 10.0之前的版本）创建图像，这会创建一个缺少P3色彩空间的图像 - 参考https://dev59.com/Ol0a5IYBdhLWcg3wHlik#41288197。

extension UIScrollView {
    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
        
            inputView?.layer.render(in: rendererContext.cgContext)
            layer.render(in: rendererContext.cgContext)
        }
    }
}

使用上述方法将会产生更高质量的图像。

第二张图片更清晰，显示了更多的颜色 - 这是通过使用UIGraphicsImageRenderer而不是UIGraphicsBeginImageContext（第一张图片）实现的。

- MindBlower3

0

@Abduliam Rehmanius的回答性能较差，因为如果UIScrollView包含大量内容区域，则会绘制整个内容区域（甚至在可见边界之外）。 @Concuror的回答存在这样一个问题，它也会绘制任何位于UIScrollView上方的内容。

我的解决方案是将UIScrollView放置在名为containerView的UIView中，并使用相同的边界来渲染containerView：

containerView.renderInContext(context)

- Jeffrey Sun

0

Swift 3.0 :

 func captureScreen() -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(self.yourScrollViewName.bounds.size, true, UIScreen.main.scale)
    let offset:CGPoint = self.yourScrollViewName.contentOffset;
    UIGraphicsGetCurrentContext()!.translateBy(x: -offset.x, y: -offset.y);
    self.yourScrollViewName.layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

并将其用作： let Image = captureScreen()

- Sri Hari YS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abduliam Rehmanius · Accepted Answer

另一种方法是使用contentOffset来调整图层的可见区域，并且仅捕获UIScrollView当前可见的区域。

UIScrollView *contentScrollView;....//scrollview instance

UIGraphicsBeginImageContextWithOptions(contentScrollView.bounds.size, 
                                       YES, 
                                       [UIScreen mainScreen].scale);

//this is the key
CGPoint offset=contentScrollView.contentOffset;
CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -offset.x, -offset.y); 

[contentScrollView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *visibleScrollViewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

干杯 :)