1. 需求说明

由于最近产品要求能够将网页转换为一整张图片，预估整个网页的高度大概有10多个屏幕的高度，因此需要添加一个网页转换为图片的功能。

如果是外部网页，可以用 Safari 浏览器的截长屏功能(需要iOS 13.0+)。但是，这次需要截取的内容是通过 APP 内的 UIWebView 显示的 HTML 网页，这就无法通过 iOS 自带的截屏功能实现了(都9012年了，iOS 怎么还没有截长屏功能？)。

2. 方案简述

绘制上下文生成图片，可以通过 UIGraphics 或者 CoreGraphics 实现。这两种方案的本质都是对 UIScrollView 进行截图操作，因此可以将这个实现方案类推至 UITableView 、 UICollectionView 等基于 UIScrollView 的控件中。

UIGraphics 实现起来比较简单，但是需要注意运行内存的释放问题。

CoreGraphics 速度快，占用空间手动释放，还可以使用异步实现，但是要花时间理解 CoreGraphics 的相关函数，需要对 CoreGraphics 绘制的图片进行翻转(这就涉及到 CoreGraphics 坐标系的问题)。

这两种方案中，更推荐使用 CoreGraphics 来实现截屏功能。

另外，在使用这两种方案的调试过程中，一定要时刻关注运行内存的变化。使用 iPhone 6 测试，当高度达到 20000 + 的时候，内存都会达到 450M 左右（上限 650M）。

3. 方案实现

(1) 设定 WebView

@interface ViewController ()@property(nonatomic, strong) UIWebView *webView;@end

- (void)viewDidLoad {[super viewDidLoad];_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];// 百度的首页可以一直往下拉，刚好可以用来测试截长屏的功能[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];[self.view addSubview:_webView];
}

(2) 添加截取图片的功能

/// 使用UIGraphics截取图片
- (UIImage *)getImageByUIGraphic {// 为了防止内存不能被及时释放，导致系统内存告急，因此在外面加一层自动释放池@autoreleasepool {// 设置截图大小UIScrollView *scrollView = self.webView.scrollView;// 保存当前的偏移量CGPoint previousContentOffset = scrollView.contentOffset;CGRect previousFrame = scrollView.frame;// 将偏移量设置为(0,0)scrollView.contentOffset = CGPointZero;scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);NSLog(@"-------- %f, %f", scrollView.frame.size.height, scrollView.contentSize.height);// ---------- start -------------// 指定大小、透明度和缩放UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, YES, 0);// 在当前上下文中渲染出整个内容[scrollView.layer renderInContext:UIGraphicsGetCurrentContext()];// 截取当前上下文，生成ImageUIImage *image = UIGraphicsGetImageFromCurrentImageContext();// 关闭图形上下文UIGraphicsEndImageContext();// ---------- end --------------// 恢复偏移量scrollView.contentOffset = previousContentOffset;scrollView.frame = previousFrame;return image;}
}/// 使用CoreGraphics截取图片
- (UIImage *)getImageByCoreGraphics {// 设置截图大小UIScrollView *scrollView = self.webView.scrollView;// 保存当前的偏移量CGPoint previousContentOffset = scrollView.contentOffset;CGRect previousFrame = scrollView.frame;// 将偏移量设置为(0,0)scrollView.contentOffset = CGPointZero;scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);// ---------- start -------------// 申请绘制空间unsigned char *imageBuffer = (unsigned char *)malloc(4 * scrollView.contentSize.width * scrollView.contentSize.height);// 绘制上下文CGContextRef imageContext = CGBitmapContextCreate(NULL, scrollView.contentSize.width, scrollView.contentSize.height, 8, scrollView.contentSize.width * 4, CGColorSpaceCreateDeviceRGB(), kCGImageAlphaPremultipliedLast);// 将CoreGraphics转换成UIKit的坐标系，先向下移动整张图片的高度，然后垂直翻转CGContextTranslateCTM(imageContext, 0.0f, scrollView.contentSize.height);CGContextScaleCTM(imageContext, 1.0f, -1.0f);// 渲染全部内容[scrollView.layer renderInContext:imageContext];// 生成图片CGImageRef imageRef = CGBitmapContextCreateImage(imageContext);// 转换为UIImageUIImage *image = [UIImage imageWithCGImage:imageRef];// 释放申请的空间CGImageRelease(imageRef);CGContextRelease(imageContext);free(imageBuffer);// ---------- end --------------// 恢复偏移量scrollView.contentOffset = previousContentOffset;scrollView.frame = previousFrame;return image;
}

(3) 添加保存图片到相册的功能

在实现这个功能之前，需要在info.plist中添加“Privacy - Photo Library Usage Description”，否则会造成 APP 崩溃。

// 记得添加头文件
// #import <Photos/Photos.h>/// 保存图片到照片库
- (void)saveImage:(UIImage *)image {NSLog(@"saveImage: %@",image);[[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{[PHAssetChangeRequest creationRequestForAssetFromImage:image];} completionHandler:^(BOOL success, NSError * _Nullable error) {if (error) {NSLog(@"保存失败: %@", error);} else {NSLog(@"保存成功");}}];
}

(4) 绑定截图按钮事件

- (IBAction)buttonEvent:(id)sender {//UIImage *image = [self getImageByUIGraphic];UIImage *image = [self getImageByCoreGraphics];if (!image) {NSLog(@"image is nil");return;}// 校验权限，保存图片PHAuthorizationStatus photoLibraryStatus = [PHPhotoLibrary authorizationStatus];if (photoLibraryStatus != PHAuthorizationStatusAuthorized) {// 权限不足[PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) {if (status != PHAuthorizationStatusAuthorized) {// 用户仍然不同意程序访问相册NSLog(@"权限不足");} else {[self saveImage:image];}}];} else {[self saveImage:image];}
}

4. 方案效果图

在测试的过程中，发现有几次截取的图片最下面的部分为空白。经过反复测试，发现当百度网页中顶部的导航栏（包含“推荐”、“视频”、“娱乐”等选项的横向导航栏）消失的时候（即处于网页的顶部一定区域内），截图的下半部分全是空白，造成这个现象的具体原因尚未弄清。

下面比较一下几种方式生成的效果图。图(1)是通过 UIGraphic 方法绘制的图片，图(2)是通过 CoreGraphics 方法绘制的图片，图(3)是使用 Safari 浏览器中整页截图生成的 PDF ，转换而成的图片。

(1) UIGraphic 方法绘制的图片

(2) CoreGraphics 方法绘制的图片

(3) 使用 Safari 浏览器中整页截图生成的 PDF ，转换而成的图片

[iOS] UIScrollView (UIWebView) 截长屏功能实现相关推荐

刚刚才知道！苹果手机新增了截长屏功能，好用方便，手机自带
截屏可以说是每台智能手机都有的功能,但是对于苹果手机来说,截长屏却是一件很不友好的事情,不仅非常麻烦不说,还要使用第三方工具才能完成,不过笔者就知道苹果手机新增了一种截长屏方式,大家一起看看吧! 开始 ...
android 截长图方法,Android实现截屏与截长图功能
本文实例为大家分享了Android实现截屏与截长图功能展示的具体代码,供大家参考,具体内容如下 Demo在GitHub的地址:ScreenShoot 在Android开发中,有时候会遇到需要截屏分享到 ...
Android实现截屏和截长图功能的几种方法
一般情况下各种型号的手机都会有自带的截屏功能,也会有诸如"开关机键+音量键"的截屏快捷键,只要手机是亮屏状态,都会将手机屏幕的可视区域(包含状态栏)全部截取下来. 如果开发中想要调 ...
Android 实现截屏和截长图功能的几种方法
欢迎大家关注我的公众号:**牛角尖尖上起舞** 一般情况下各种型号的手机都会有自带的截屏功能,也会有诸如"开关机键+音量键"的截屏快捷键,只要手机是亮屏状态,都会将手机屏幕的可视区 ...
android中最新webview的功能,Android WebView实现截长图功能
本文实例为大家分享了Android实现截长图功能的具体代码,供大家参考,具体内容如下先看看手机自带的长截屏功能: 机型: vivo x9 plus 大胆推测实现逻辑: 1:需要一个可以滚动的Vie ...
android webview 图片居中,Android WebView实现截长图功能
本文实例为大家分享了Android实现截长图功能的具体代码,供大家参考,具体内容如下先看看手机自带的长截屏功能: 机型: vivo x9 plus 大胆推测实现逻辑: 1:需要一个可以滚动的Vie ...
追求截图的极致-牛牛截图再添新成员-截长图功能
很久没有写关于截图控件的文章了,借着这次截图控件新功能升级,向大家介绍一下牛牛截图! 大家知道,我们对于截图控件的功能性.易用性以及体验都有着非常高的要求,总结如下: 能力方面我们支持多显示器.高清 ...
网页怎么截长屏？好用的方法分享介绍
网页怎么截长屏?相比大家都知道截图的方法,但是有的时候一个网站的内容很长,并且不支持站外分享.这个时候我们只能借助截图保存内容了,有的时候一些截图只能截取一半,或者无法截取更多的内容.这个时候我们选择 ...
截屏与截长图功能的实现
Demo在GitHub的地址: https://github.com/Hebin320/ScreenShoot Demo在CSDN上的下载地址: http://download.csdn.net/de ...
Chrome浏览器自带截长图功能，只需两个快捷键！
截图大家都会,微信截图,或者下载截图工具Snipaste.PicPick等都可以实现.但如果要截取当前浏览器的整个页面呢?可能需要下载专门截长图的工具,比如FastStone Capture.今天要说 ...

[iOS] UIScrollView (UIWebView) 截长屏功能实现