公司的App生成图片长微博的功能已经有一段时间,在开发时遇到过截屏出现黑色的问题.之前我以为是iOS7和7以上系统的问题,代码是这样写的.
+ (UIImage*)snapshot {
UIViewController *topViewController = [UIViewController topViewController];
UIGraphicsBeginImageContextWithOptions(topViewController.view.bounds.size,YES,2.0f);
if([[[UIDevice currentDevice]systemVersion]floatValue] >=8.0) {
[topViewController.view.layerrenderInContext:UIGraphicsGetCurrentContext()];
} else {
[topViewController.viewdrawViewHierarchyInRect:topViewController.view.boundsafterScreenUpdates:YES];
}
UIImage*finalImage =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
returnfinalImage;
}
判断设备调用不同的方法来实现.最近运营的同事反馈出现了长图中部分内容空白的问题,后来在解决的过程中,之前的思考与解决方法有问题.下面我就说一下是如何解决的.
普通的截屏只要得到当前ViewController.view 就可以进行截屏.
顺便提醒一下iOS 7上UIView上提供了drawViewHierarchyInRect:afterScreenUpdates:来截图，速度比renderInContext:快15倍。
以腾讯新闻为例,每篇文章内容长度不同,如果想生成长图必须要把超过屏幕内容也截出来.UICollectionView继承UIScrollView,通过调整ContentOffset即可得到屏幕外UICollectionView的内容.
最早实现的方法是,通过ContentOffset得到屏幕外的内容生成一个StoryView,并且在下面加一个APP Logo的footerView.
这样完整的一篇加角标的文章长图的StoryView就得到了,然后截图.
但是!遇到的问题就是StoryView有时会出现黑色,经过Google和查询苹果官方文档.知道了问题的原因就是View的高度过高.
NOTE
In iOS 2.x, the maximum size of aUIViewobject is 1024 x 1024 points. In iOS 3.0 and later, views are no longer restricted to this maximum size but are still limited by the amount of memory they consume. It is in your best interests to keep view sizes as small as possible. Regardless of which version of iOS is running, you should consider tiling any content that is significantly larger than the dimensions of the screen.
我个人测试大概是View高度超过4000+就会有问题(没有特别精确,4000多一点点还是没有问题,我这里以4000为准).
纹理的渲染
所有的 Bitmap，包括图片、文本、栅格化的内容，最终都要由内存提交到显存，绑定为 GPU Texture。不论是提交到显存的过程，还是 GPU 调整和渲染 Texture 的过程，都要消耗不少 GPU 资源。当在较短时间显示大量图片时（比如 TableView 存在非常多的图片并且快速滑动时），CPU 占用率很低，GPU 占用非常高，界面仍然会掉帧。避免这种情况的方法只能是尽量减少在短时间内大量图片的显示，尽可能将多张图片合成为一张进行显示。
当图片过大，超过 GPU 的最大纹理尺寸时，图片需要先由 CPU 进行预处理，这对 CPU 和 GPU 都会带来额外的资源消耗。目前来说，iPhone 4S 以上机型，纹理尺寸上限都是 4096x4096，更详细的资料可以看这里：iosres.com。所以，尽量不要让图片和视图的大小超过这个值。
参考引用GuoYaoyuanBlog:iOS 保持界面流畅的技巧
然后转换了思路通过"拼图"的方式来解决长图的问题.每一部分截一张图.最后将所有的图片拼接起来.
效果图:
图一:
最后附上相关代码:
NSMutableArray*imageArray = [NSMutableArray array];
CGFloatoneImageHeight =2000.0f;
CGFloatstoryViewTotalHeight = (storyCollectionView.contentSize.height+ storyCollectionView.contentInset.top+ storyCollectionView.contentInset.bottom);
NSUIntegertotalImageCounts =ceilf( storyViewTotalHeight / oneImageHeight);
storyView.frame=CGRectMake(0,0,ScreenWidth, oneImageHeight);
[storyView layoutIfNeeded];
for(int i =0; i < totalImageCounts; i++) {
[storyCollectionViewsetContentOffset:CGPointMake(0, i * oneImageHeight - storyCollectionView.contentInset.top)];
if(i == totalImageCounts -1) {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(ScreenWidth, storyViewTotalHeight - i * oneImageHeight),YES, imageSacle);
[storyViewdrawViewHierarchyInRect:storyView.frameafterScreenUpdates:YES];
}else{
UIGraphicsBeginImageContextWithOptions(storyView.bounds.size,YES, imageSacle);
[storyViewdrawViewHierarchyInRect:storyView.frameafterScreenUpdates:YES];
}
UIImage*image =UIGraphicsGetImageFromCurrentImageContext();
[imageArrayaddObject:image];
UIGraphicsEndImageContext();
}
//拼接长微博图片
UIImage*image = imageArray[0];
for(inti =0; i < imageArray.count; i++) {
image = [StoryEditorViewControllercombine:image :imageArray[i+1]imageSacle:imageSacle];
if(i == imageArray.count-2) {
break;
}
}
+ (UIImage*)combine:(UIImage*)topImage :(UIImage*)bottomImage imageSacle:(CGFloat)imageSacle {
CGFloatwidth = topImage.size.width;
CGFloatheight = topImage.size.height+ bottomImage.size.height;
CGSizeoffScreenSize =CGSizeMake(width, height);
UIGraphicsBeginImageContextWithOptions(offScreenSize,YES, imageSacle);
CGRectrect =CGRectMake(0,0, width, topImage.size.height);
[topImagedrawInRect:rect];
rect.origin.y+= topImage.size.height;
CGRectrect1 =CGRectMake(0, rect.origin.y, width, bottomImage.size.height);
[bottomImagedrawInRect:rect1];
UIImage* imagez =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imagez;
}
网友评论