iOS 原生和H5结合 WKWebView的长截图问题

最新推荐文章于 2026-04-01 04:27:39 发布
原创 最新推荐文章于 2026-04-01 04:27:39 发布 · 5.2k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了在iOS应用中，如何处理WKWebView的长截图问题，包括在不同系统版本下的截图策略，如通过调整WKWebView的frame和利用scrollView的截图方法，并提供了一种适用于iOS 10.0至11.0系统的方法。

前言

        最近的一版,有很多....泯灭人性的地方.遇到了一些之前没有遇到的问题,也有了一些自己的体会,先说一个跟技术分享没有关系的经验问题: 一定不要为了省代码而作过多的逻辑判断(主要是过不了自己心里的一关),尤其是在周期紧的情况下,无论是写还是review都是一个大问题.即使想达到节省代码量的目的.这些逻辑判断最好写在model里.不要在页面里做过多的展示判断.否则....你的下场就和我一样.....

        言归正传,WKWebView的截图就是一个坑,你想躲避他,回头便还是会遇到他.其实如果只是单纯的WKWebView的截图相比较之下相对容易一点,读了前辈的文章基本上你有两条路可以走: 1.将WKWebView的contentOffSet进行设置一屏一屏的截图,然后再拼接起来假装达到长截图的效果; 2.将WKWebView放在一个父视图上然后通过更改这个父视图的frame 的y来截的当前父视图的截图,然后再一屏一屏的截下来.假装达到长截图的效果.....于是乎我不信其邪,走上了一条长达1天半的歪路.不过还是有收获,现将前辈的网址贴过来,供大家瞻仰:我只是想要截个屏.而且和很多我看过的解决blog不一样的是前辈是个有始有终的人.... 他还有一个截屏续,完美的解决了我的一些困惑...并非问题.

        为了能够方便大家,还得去前辈那里看具体的技术点.我简单的形容一下我的理解,和进行探索的过程.

场景描述   

        在一个tableView 下我需要接上一个webView.我有三条路: 

  1. 放在tableView的tableFooterView上,限制webView的滑动整体让tableView滑动来弥补.当然后期会解决手势冲突
  2. 放在tableView的Cell中
  3. 将tableView作为webView的头视图,然后设置webView的contentInset,之前的blog中有相关操作

        然后我选择了1

主要矛盾   

        长截图.....一个原生加webView的长截图,一个webView大部分时间在屏幕外的长截图....一个要截tableView 还要截一个放在他footer里的WKWebView.....对于初出茅庐的我....很是塞心...之前项目里这种部分都是请求接口得到image....不过鉴于周期短还是不给别人添麻烦了...而且那样还得一个个生成....其实已经与自己的想法背离.

        于是看到了前辈的blog,前辈有个开源库SwViewCapture,虽然...我...下下来...直接运行截图WKWebView的时候直接就崩溃了...但是其思路让我豁然开朗,茅塞顿开.柳暗花明,拨云见雾.....,这个开源库里有关于普通view,tableView,webView以及WKWebView的截图的所有例子.不过他的尝试办法貌似有问题.他的主要思路有下面五个:

  1. 将WKWebView的frame拉长和ContentSize的高度保持一致, 然后截图
  2. 将WKWebView的frame拉长和ContentSize的高度一致, 然后通过WKWebView的snapshotViewAfterScreenUpdates获取的view进行截图
  3. 对WKWebView内部的WKContentView直接截图
  4. 将WKScrollView对应的Screen进行拉伸, 然后对WKWebView进行等价拉伸, 再截图
  5. 使用私有API_snapshotRect:intoImageOfWidth:completionHandler

首先哈,前辈对于1-3的办法直接尝试得到的结论是截屏到空白,或者只有屏幕部分,对此我表示不认可,因为有的系统下我就是直接1方法达到的,至于其他的几种方法除了5,我都有涉及部分所以重点讲我是怎么实现的.

这个坑很大.希望大家能够很好地读完,

在我经过测试之后发现该截图与iOS系统版本有关

在iOS最新的11.0以后的话整体对WKWebView的scrollView进行截图则能够截全图片.然后再和tableView的图片进行拼接即可.



//iOS 11.0 以上的系统用这个方法


+ (UIImage *)captureScrollView:(UIScrollView *)scrollView


{


    UIImage* image = nil;


    UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, NO, 0.0);


    {


        CGFloat scale = 1;


        CGPoint savedContentOffset = scrollView.contentOffset;


        CGRect savedFrame = scrollView.frame;


        scrollView.contentOffset = CGPointZero;


        scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width * scale, scrollView.contentSize.height * scale + 30);


        [scrollView.layer renderInContext:UIGraphicsGetCurrentContext()];


        image = UIGraphicsGetImageFromCurrentImageContext();


        scrollView.contentOffset = savedContentOffset;


        scrollView.frame = savedFrame;


    }


    UIGraphicsEndImageContext();


    


    if (image != nil) {


        return image;


    }


    return nil;


}


//将WKWebView的截图拼接到tableView的下边即可


但是这种方法对于iOS10的机型便出现了WKWebView的scrollView空白的现象,经过不断地探索,从某个论坛中找到这样一个方法:






//iOS 10.0 - 11.0的系统用这个方法


-(UIImage *)convertWholePageToImage:(WKWebView *)wkweb{


    CGFloat boundsWidth = wkweb.bounds.size.width;


    CGFloat boundsHeight = wkweb.bounds.size.height;


    UIScrollView *scrollView = wkweb.scrollView;


    CGPoint oldOffset = scrollView.contentOffset;


    [scrollView setContentOffset:CGPointZero animated:NO];


    CGFloat contentHeight = scrollView.contentSize.height;


    CGFloat scale = [UIScreen mainScreen].scale;


    


    NSMutableArray *images = [NSMutableArray array];


    while (contentHeight > 0) {


        UIGraphicsBeginImageContextWithOptions(wkweb.bounds.size, NO, scale);


        [wkweb.layer renderInContext:UIGraphicsGetCurrentContext()];


        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();


        UIGraphicsEndImageContext();


        [images addObject:image];


        CGFloat offsetY = scrollView.contentOffset.y;


        [scrollView setContentOffset:CGPointMake(0, offsetY + boundsHeight) animated:NO];


        contentHeight -= boundsHeight;





    }//针对webView一屏幕一屏幕的截图拼接


    [scrollView setContentOffset:oldOffset animated:NO];


    UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, NO, scale);


    for (NSInteger index = 0; index < images.count; index++) {


        UIImage *image = images[index];


        [image drawInRect:CGRectMake(0, boundsHeight * index, boundsWidth, boundsHeight)];


    }


    UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();


    UIGraphicsEndImageContext();


    return fullImage;


}



 很难过这个截屏对于10.0 没有用,之所以有问题可能跟绘制的方法有关.在前辈的文章里发现了解决的方法





  • view中任意一个子View包含WKWebView, 则采用drawViewHierarchyInRect的方式去截取视图
  • view中任意一个子View都不包含WKWebView, 则采用renderInContext的方式去截图


所以我直接将rederInContext 换成了 drawViewHierarchyInRect发现可以iOS10.0以上11.0 以下的系统都可以成功的进行截图.


----------------------iOS8.9 之后更新

                

        

    





  



    



              

                

              

            
              



	

		

			

				
					
iOS使用WebView生成长截图的第3种解决方案

				
			

			

				

					08-26
				

			

		

		

			
				
主要给大家介绍了关于iOS使用WebView生成长截图的第3种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	



              


  
              

                


	

		

			

				
					
WKWebView网页全屏截图（OC代码）

				
			

			

				

					10-31
				

			

		

		

			
				
WKWebView全屏截图OC代码
UIScrollView全屏截图OC代码
UIView全屏截图OC代码
相关文章地址：http://blog.csdn.net/u014220518/article/details/52983476

			
		

	





	

		

			

				
					
iOS-长截图 （学习记录）

				
			

			

				

					qq_38863196的博客
				

				

					08-17
					
					2185
					
				

			

		

		

			
				
iOS 长截图实现

			
		

	



		

			
		



	

		

			

				
					
iOS WebView生成长截图的第三种解决方案

				
			

			

				

					weixin_34168700的博客
				

				

					09-15
					
					1381
					
				

			

		

		

			
				
前言
由于项目需要，新近实现了一个长截图库 SnapshotKit。其中，需要支持 UIWebView、WKWebView 组件生成长截图。为了实现这个特性，查阅了很多资料，同时也做了不同的新奇思路尝试，最终实现了一个新的、取巧的技术方案。
以下主要总结了在“WebView生成长截图”需求方面，“网上已有方案”和“我的全新方案”的各自实现要点和优缺点。
WebView生成长截图的已有方案
根据 G...

			
		

	





	

		

			

				
					
Python音频处理实战：用librosa的STFT函数解析音乐频谱（附常见参数避坑指南）

					
最新发布

				
			

			

				

					weixin_33670786的博客
				

				

					04-01
					
					682
					
				

			

		

		

			
				
本文深入解析Python音频处理库librosa的STFT函数，探讨如何通过调整n_fft、hop_length等关键参数优化音乐频谱分析效果。结合音乐信息检索(MIR)和语音分析案例，提供参数选择经验法则和常见问题解决方案，帮助开发者高效实现音频时频分析。

			
		

	





	

		

			

				
					
获取WKWebView的长截图

				
			

			

				

					多分享一点点，共同进步一点点
				

				

					05-25
					
					1099
					
				

			

		

		

			
				
获取WKWebView的长截图

			
		

	





	

		

			

				
					
iOS 使用WKWebView的截图功能来截取H5页面，并将截图保存到相册。

				
			

			

				

					GY5338的博客
				

				

					07-06
					
					1887
					
				

			

		

		

			
				
请注意，为了将截图保存到相册，您需要在Info.plist文件中添加相册访问权限的描述。同样，在Info.plist文件中添加相册访问权限的描述。

			
		

	





	

		

			

				
					
WKWebView——html生成长图

				
			

			

				

					weixin_42465944的博客
				

				

					06-21
					
					1808
					
				

			

		

		

			
				
前言由于本人今年加入了换工作大潮，到了如今的这家公司，工作不是忙，所以有跟多的时间自我学习，于是想到写下自己在这两年工作以来的第一篇博客。最近在重拾swift，所以把之前遇到的一个把Html5页面转换成长图的功能使用swift重新整理了一遍；当时在做这个功能是也在网上搜集过很多资料，相对来说使用UIWebView进行截图相对来说是很简单的直接使用renderInContext方法即可将web页面直...

			
		

	





	

		

			

				
					
iosWKWebView截图

				
			

			

				

					haoziy1989511的博客
				

				

					03-11
					
					3906
					
				

			

		

		

			
				
本文得从业务需要说起;
最近一个研发需求需要,由于想要便捷开发,不用在服务端跟着客户端一起接受苹果审核的煎熬,决定把部分业务(主要是报表)放置在服务端开发,前端只需要搭载一个入口即可;最开始果断采用了UIWebView做Web部分的容器,(可能有其他更好的方案,暂时没有想到),然而一个事实是 UIWebView本身就有BUG,关于UIWebView内存占用很大而且泄露问题参考这几个博客包括Sta

			
		

	





	

		

			

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

				
			

			

				

					wu_gq的博客
				

				

					12-23
					
					1160
					
				

			

		

		

			
				
1. 需求说明

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

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

			
		

	





	

		

			

				
					
WKWebView的屏幕截图问题总结

				
			

			

				

					MoRenYaoJing的博客
				

				

					02-14
					
					3874
					
				

			

		

		

			
				
WKWebView的屏幕截图问题总结WKWebView的屏幕截图问题问题描述出bug的截图方法解决问题的截图方法原因总结
WKWebView的屏幕截图问题
问题描述
在iOS9上使用截图方法对wkwebview展示的h5内容进行截图，截图后是空白界面，在uiwebview上截图正常，在wkwebview
iOS10 以上也正常。
出bug的截图方法
+ (UIImage *)sb_creatIma...

			
		

	





	

		

			

				
					
iOS -- tableView截取长图 或者 UIScrollView截取长图 （Swift代码）

				
			

			

				

					weixin_43259805的博客
				

				

					12-25
					
					2101
					
				

			

		

		

			
				
iOS -- tableView截取长图 或者 UIScrollView截取长图 （Swift代码）

			
		

	





	

		

			

				
					
WKWebView 内容显示不全问题

				
			

			

				

					science_Lee的博客
				

				

					08-03
					
					8246
					
				

			

		

		

			
				
最近项目在嵌套h5 网页，使用苹果WKWebView 来展示，在5s 上展示是可以的，但是在6 或者 7 上会显示不全。 
全是感觉WKWebView 跑到屏幕外边去了。设置：self.navigationController.navigationBar.translucent = NO; self.webView = [[WKWebView alloc] initWithFrame:CGRectM

			
		

	





	

		

			

				
					
[贝聊科技] WebView截长图解决方案，h5前端开发入门

				
			

			

				

					2301_79849953的博客
				

				

					04-05
					
					711
					
				

			

		

		

			
				
以上是WebView截长图方法的总结和分享，对X5内核的截图也是尝试了多种途径最后找到满意的解决方案。另外，截长图会占用大量内存，容易触发OOM，所以代码中也要注意对OOM的处理。在使用了X5内核的项目中，使用WebView截取长图的判断逻辑可以是：// 有x5内核没有生效，并且Android版本是5.0及以上时，调用enableSlowWholeDocumentDraw()方便截取长图if (!/* 创建WebView ×／// 网页截图try {

			
		

	





	

		

			

				
					
iOS 实现长屏截图，scrollview，tableview截图

					
热门推荐

				
			

			

				

					CXLiao的博客
				

				

					08-31
					
					1万+
					
				

			

		

		

			
				
通常截图的时候，如果需要截scroll，或者tableview的时候就不能全屏截图了。
截图方法。图片保存的回调代码部分- (void)btnAction:(UIButton *)sender {
    UIImage* image = nil;    // 下面方法，第一个参数表示区域大小。第二个参数表示是否是非透明的。如果需要显示半透明效果，需要传NO，否则传YES。第三个参数就是屏幕密度了，

			
		

	





	

		

			

				
					
[贝聊科技] WebView截长图解决方案

				
			

			

				

					cwcnl25131的博客
				

				

					04-08
					
					754
					
				

			

		

		

			
				
}在Android5.0及以上版本，Android对进行了优化，为了减少内存使用和提高性能，使用加载网页时只绘制显示部分。如果我们不做处理，仍然使用上述代码截图的话，就会出现只截到屏幕内显示的内容，其它部分是空白的情况。
这时候，我们通过调用方法可以关闭这种优化，但要注意的是，该方法需要在实例被创建前就要调用，否则没有效果。所以我们在实例被创建前加入代码：if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
android.webkit.W

			
		

	





	

		

			

				
					
iOS WebView生成长截图（截图分享功能实现)

				
			

			

				

					RJM758859182的博客
				

				

					09-07
					
					9277
					
				

			

		

		

			
				
iOS 截屏监听（截图分享功能实现)


  产品经理今天提出一个新的需求，需要实现类似于每日优鲜、淘宝等客户端的截屏分享的功能，即点击分享按钮把整个H5报告（kwWebView展示的所有内容）截取成一个二进制流，再合成一张有大小的图片分享出去，如下效果： 
  


1、给WKWebView添加类别  （WKWebView+ZFJViewCapture.h） 
 这个类别可以把网页全屏截图，直接...

			
		

	





	

		

			

				
					
iOS webview的截屏功能

				
			

			

				

					止于至善
				

				

					06-27
					
					1608
					
				

			

		

		

			
				
 
 
 
    iOS webview实现截屏的功能 
 
 
项目的应用场景

实现网页的截屏功能用于分享到微信图片，类似于分享证书等,代码如下


- (UIImage *)createImageWithView:(UIView *)view
{
    CGSize s = view.bounds.size;
    //第一个参数表示区域大小。第二个参数表示是否是非透明的。如果需要显示...

			
		

	





	

		

			

				
					
我只是想要截个屏

				
			

			

				

					沸腾的泪水的专栏
				

				

					06-29
					
					5543
					
				

			

		

		

			
				
转载自:   http://blog.startry.com/2016/02/24/Screenshots-With-SwViewCapture/


想必使用iPhone的用户, 大家都知道按照Home键+电源键就可以截屏了。 截屏对于产品经理、工程师、设计师都比较重要。那么在iOS中用代码截屏也是再常用不过的功能了~ 那么在iOS研发中, 怎么样才能有效的截屏呢? 笔者在上周用了2天时间

			
		

	





	

		

			

				
					
iOS-OC-WKWebView UIScrollView 全屏截图，网页全屏截图

				
			

			

				

					ZFJ_张福杰
				

				

					10-31
					
					6541
					
				

			

		

		

			
				
这个类别可以把网页全屏截图，直接上代码！
1.ZFJContentCaptureCompletionHandler
- (void)ZFJContentCaptureCompletionHandler:(void(^)(UIImage *capturedImage))completionHandler{
    CGPoint offset = self.scrollView.contentO

			
		

	



              




          





        



    





    



      

      

        
      

      





	

		
评论 2

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值