截图
关于截图有两个方法:
- (void)renderInContext:(CGContextRef)ctx
: 作用于CALayer层的方法。将view的layer
渲染到当前的绘制的上下文中。- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates
: 作用于UIView的方法。对view进行一个快照,然后将快照渲染到当前的上下文中。
renderInContext
就不说了,比较容易,只需要注意下UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
函数中的的size即可。
关键是- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates
函数中多了一个描述位置的rect
参数,容易弄不清这个rect
跟UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
函数中的size
的关系。之前一直没有完全理解这两个参数的区别,搜了很多资料发现都没有人讲清楚这两个参数的含义,网上来来回回都是一些雷同的代码,这次仔细测试研究了下,总结了下这两个参数的含义。
一般截图的方法可以用例如下面这段代码,对当前控制的view进行截图:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)), YES, 0.0);
[self.view drawViewHierarchyInRect:self.view.bounds afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
先介绍下这两个函数的含义:
UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
:开启一个绘图的上下文
size : size是指绘图上下文的宽高,可以理解为要绘制图形的画布的大小
opaque : 是否透明,如果传YES,画布的背景色为黑色,NO的时候,画布背景色是白色
scale:指的是绘制出来的图片的像素比,决定了绘图图片的清晰度,一般填0.0,默认屏幕缩放比
- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates
: 将要截屏的view绘制到当前的上下文中。
rect
:指定图片绘制的坐标
afterUpdates
:截图的瞬间是否将屏幕当前的变更渲染进去
这个方法的是UIView
的方法,截图的目标对象就是当前方法的调用者。
例如[self.view drawViewHierarchyInRect:self.view.bounds afterScreenUpdates:NO];
就是对self.view
这个对象进行截图,会把self.view
当前的这个view全部截取下来然后绘制到当前的上下文中生成图片,然后按照这个方法中指定的rect
为frame,以画布为父视图绘制到画布中去。
注意:截图截取的是drawViewHierarchyInRect
这个方法调用的view,而渲染出来的效果(图片的位置和大小)是由UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
中的size和- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates
中的rect共同决定的。
例如,我们要截取下面屏幕中的照片(请忽略被变形的照片...)
代码如下:
注:
self.view
是当前控制器的view
self.screenshotImgV
是上面的图片的UIImageView
。self.screenshotImgV
的frame是:(50, 37, 275, 489)
为了方便理解,下面用画布
来指代绘制的上下文
。
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, 1, 0.0);
[self.screenshotImgV drawViewHierarchyInRect:self.screenshotImgV.frame afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
如上指定画布
的大小为当前self.view
的大小,对self.screenshotImgV
进行截图,同时设置截图后的图片在画布
中的位置为自身的frame。
截图效果:
由于self.view
的大小是大于当前self.screenshotImgV
的大小,所以对self.screenshotImgV
进行截图绘制后,并不能充满整个画布
,只能占据其中的一部分。而占据的位置依据的就是drawViewHierarchyInRect
方法中指定的rect
。这个例子中指定的是self.screenshotImgV.frame
,也即:(50, 37, 275, 489)
这个frame,所以就展示如上面效果。
下面我们来调整下指定的rect
, 让其为self.screenshotImgV.bounds
,看看效果。
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, 1, 0.0);
[self.screenshotImgV drawViewHierarchyInRect:self.screenshotImgV.bounds afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
截图效果:
如上图,由于rect
用的是self.screenshotImgV.bounds
,所以截图的坐标的x
和y
变为了(0, 0)
,也就是图片的起始位置变为了最左上角。
下面我们来换一下,把画布的大小设置为self.screenshotImgV
的大小,然后对self.view
进行截图,看看效果:
UIGraphicsBeginImageContextWithOptions(self.screenshotImgV.bounds.size, 1, 0.0);
[self.view drawViewHierarchyInRect:self.screenshotImgV.frame afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
截图效果:
如上,由于rect
指定为self.screenshotImgV.frame
,只能从(50, 37)
这个位置开始渲染,所以在截图的时候只能截取self.view
中的一部分,另外一部分超出画布范围截取不到。如果frame的坐标是从(0,0)
开始效果如何呢?
UIGraphicsBeginImageContextWithOptions(self.screenshotImgV.bounds.size, 1, 0.0);
[self.view drawViewHierarchyInRect:self.screenshotImgV.bounds afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
截图效果:
发现刚好把self.view
完整的渲染出来了。这是因为UIGraphicsBeginImageContextWithOptions
方法中的size
和drawViewHierarchyInRect
中指定的rect.size
大小相同,而且rect
的x
,y
都是(0,0)
,所以截取的self.view
从左上角起始位置开始渲染,刚好能够把整个画布充满,全部渲染出来。
通过上面的例子,应你能弄清楚UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
中的size
和- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates
中的rect
的意义和关系了吧。
当然对于这个例子,如果我们想截取屏幕中的图片self.screenshotImgV
,只需要把尺寸都指定为self.screenshotImgV
的size
既可:
UIGraphicsBeginImageContextWithOptions(self.screenshotImgV.bounds.size, 1, 0.0);
[self.screenshotImgV drawViewHierarchyInRect:self.screenshotImgV.bounds afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
截图效果:
裁剪图片
裁剪图片就是对当前的图片按照指定的大小范围生成一个新的图片,方法如下:
- (UIImage *)createImageWithRect:(CGRect)rect image:(UIImage *)clipImage {
CGImageRef imageRef = CGImageCreateWithImageInRect(clipImage.CGImage, rect);
UIImage *image = [UIImage imageWithCGImage:imageRef scale:clipImage.scale orientation:UIImageOrientationUp];
CGImageRelease(imageRef);
return image;
}
这里的rect
就是指定的裁剪范围。方法比较简单,没有什么好解释的。主要注意的是,这里rect
包含的x
,y
,width
,height
应该是图片的绝对尺寸乘以图片的缩放因子,否则裁剪出来的图片是不对的。如果图片是1倍图会没什么问题,但是如果是2倍图或者3倍图,要么可能尺寸不对,要么截出来的图片很模糊。完整方法可改为:
- (UIImage *)createImageWithRect:(CGRect)rect image:(UIImage *)clipImage {
rect.origin.x *= clipImage.scale;
rect.origin.y *= clipImage.scale;
rect.size.width *= clipImage.scale;
rect.size.height *= clipImage.scale;
CGImageRef imageRef = CGImageCreateWithImageInRect(clipImage.CGImage, rect);
UIImage *image = [UIImage imageWithCGImage:imageRef scale:clipImage.scale orientation:UIImageOrientationUp];
CGImageRelease(imageRef);
return image;
}
其他注意点:
WKWebView
对于WKWebView使用
renderInContext
的方法进行截图的时候, 当WKWebView 执行UIGraphicsGetCurrentContext()
的结果返回的nil,截图失败所以只能
UIView
的drawViewHierarchyInRect
的方法去截图
UIVisualEffectView,高斯模糊蒙版
- 对于使用了
UIBlurEffect
进行高斯模糊的UIView进行截图的时候,如果对view.layer
使用renderInContext
的方法进行截图,上面的高斯模糊蒙版会失真失效,可以改用drawViewHierarchyInRect
方法,这样能够保持高斯模糊的效果。相对于renderInContext
是对view的layer
渲染到当前的上下文中,drawViewHierarchyInRect
方法是对view进行一个快照,然后将快照渲染到当前的上下文中。