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

前言

WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebView和WKWebView,UIWebView是iOS2之后开始使用,WKWebView是在iOS8开始使用,WKWebView将逐步取代笨重的UIWebView。

由于项目需要,新近实现了一个长截图库 SnapshotKit。其中,需要支持 UIWebView、WKWebView 组件生成长截图。为了实现这个特性,查阅了很多资料,同时也做了不同的新奇思路尝试,最终实现了一个新的、取巧的技术方案。

以下主要总结了在“WebView生成长截图”需求方面,“网上已有方案”和“我的全新方案”的各自实现要点和优缺点。

WebView生成长截图的已有方案

根据 Google 所搜索到的资料,目前iOS WebView生成长截图的方案主要有2种:

  • 方案一:修改Frame,截图组件
  • 方案二:分页截图组件内容,合成长图

下面将会简述方案一和方案二的具体实现。

方案一:修改Frame,截图组件

方案一的实现要点在于:修改 webView.scrollView 的 frameSize  为 contentSize,然后对整个 webView.scrollView 进行截图。

不过,这个方案只适用 UIWebView 组件,因为其是一次性加载网页所有的内容。而 WKWebView 组件,为了节省内存,加载网页内容时,只加载可视部分——这一点类似 UITableView 组件。在修改webView.scrollView 的 frameSize 后,立即执行了截图操作, 这时候,WKWebView由于还没把网页的内容加载出来,导致生成的长截图是空白的。

方案一核心代码如下:

extension UIScrollView {
 public func takeSnapshotOfFullContent() -> UIImage? {
  let originalFrame = self.frame
  let originalOffset = self.contentOffset

  self.frame = CGRect.init(origin: originalFrame.origin,size: self.contentSize)
  self.contentOffset = .zero

  let backgroundColor = self.backgroundColor ?? UIColor.white

  UIGraphicsBeginImageContextWithOptions(self.bounds.size,true,0)

  guard let context = UIGraphicsGetCurrentContext() else {
   return nil
  }
  context.setFillColor(backgroundColor.cgColor)
  context.setStrokeColor(backgroundColor.cgColor)

  self.drawHierarchy(in: self.bounds,afterScreenUpdates: true)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()

  self.frame = originalFrame
  self.contentOffset = originalOffset

  return image
 }
}

测试代码:

// example code
 private func takeSnapshotOfUIWebView() {
 let image = self.webView.scrollView.takeSnapshotOfFullContent()
 // 处理image
} 

方案二:分页截图组件内容,合成长图

方案二的实现要点在于:分页滚动WebView组件的内容,然后生成分页截图,最后把所有分页截图合成一张长图。

这个方案适用于 UIWebView 组件和 WKWebView 组件。

方案二核心代码如下:

extension UIScrollView {
 public func takeScreenshotOfFullContent(_ completion: @escaping ((UIImage?) -> Void)) {
  // 分页绘制内容到ImageContext
  let originalOffset = self.contentOffset

  // 当contentSize.height<bounds.height时,保证至少有1页的内容绘制
  var pageNum = 1
  if self.contentSize.height > self.bounds.height {
   pageNum = Int(floorf(Float(self.contentSize.height / self.bounds.height)))
  }

  let backgroundColor = self.backgroundColor ?? UIColor.white

  UIGraphicsBeginImageContextWithOptions(self.contentSize,0)

  guard let context = UIGraphicsGetCurrentContext() else {
   completion(nil)
   return
  }
  context.setFillColor(backgroundColor.cgColor)
  context.setStrokeColor(backgroundColor.cgColor)

  self.drawScreenshotOfPageContent(0,maxIndex: pageNum) {
   let image = UIGraphicsGetImageFromCurrentImageContext()
   UIGraphicsEndImageContext()
   self.contentOffset = originalOffset
   completion(image)
  }
 }

 fileprivate func drawScreenshotOfPageContent(_ index: Int,maxIndex: Int,completion: @escaping () -> Void) {

  self.setContentOffset(CGPoint(x: 0,y: CGFloat(index) * self.frame.size.height),animated: false)
  let pageFrame = CGRect(x: 0,y: CGFloat(index) * self.frame.size.height,width: self.bounds.size.width,height: self.bounds.size.height)

  DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.3) {
   self.drawHierarchy(in: pageFrame,afterScreenUpdates: true)

   if index < maxIndex {
    self.drawScreenshotOfPageContent(index + 1,maxIndex: maxIndex,completion: completion)
   }else{
    completion()
   }
  }
 }
}

测试代码:

// example code
private func takeSnapshotOfUIWebView() {
 self.uiWebView.scrollView.takeScreenshotOfFullContent { (image) in
  // 处理image
 }
}

private func takeSnapshotOfWKWebView() {
 self.wkWebView.scrollView.takeScreenshotOfFullContent { (image) in
  // 处理image
 }
}

WebView生成长截图的新方案

除了方案一和方案二,还有新方案吗?

答案是肯定加确定以及一定的。

这个新方案的要点在于:iOS系统的WebView打印功能。

iOS系统支持把WebView的内容打印到PDF文件上,借助这个特性,新方案的设计如下:

  • 把 WebView组件的内容全部打印到一页PDF上
  • 把PDF转换成图片

新方案的核心代码如下:

import UIKit
import WebKit

/// WebViewPrintPageRenderer: use to print the full content of webview into one image
internal final class WebViewPrintPageRenderer: UIPrintPageRenderer {

 private var formatter: UIPrintFormatter

 private var contentSize: CGSize

 /// 生成PrintPageRenderer实例
 ///
 /// - Parameters:
 /// - formatter: WebView的viewPrintFormatter
 /// - contentSize: WebView的ContentSize
 required init(formatter: UIPrintFormatter,contentSize: CGSize) {
  self.formatter = formatter
  self.contentSize = contentSize
  super.init()
  self.addPrintFormatter(formatter,startingAtPageAt: 0)
 }

 override var paperRect: CGRect {
  return CGRect.init(origin: .zero,size: contentSize)
 }

 override var printableRect: CGRect {
  return CGRect.init(origin: .zero,size: contentSize)
 }

 private func printContentToPDFPage() -> CGPDFPage? {
  let data = NSMutableData()
  UIGraphicsBeginPDFContextToData(data,self.paperRect,nil)
  self.prepare(forDrawingPages: NSMakeRange(0,1))
  let bounds = UIGraphicsGetPDFContextBounds()
  UIGraphicsBeginPDFPage()
  self.drawPage(at: 0,in: bounds)
  UIGraphicsEndPDFContext()

  let cfData = data as CFData
  guard let provider = CGDataProvider.init(data: cfData) else {
   return nil
  }
  let pdfDocument = CGPDFDocument.init(provider)
  let pdfPage = pdfDocument?.page(at: 1)

  return pdfPage
 }

 private func covertPDFPageToImage(_ pdfPage: CGPDFPage) -> UIImage? {
  let pageRect = pdfPage.getBoxRect(.trimBox)
  let contentSize = CGSize.init(width: floor(pageRect.size.width),height: floor(pageRect.size.height))

  // usually you want UIGraphicsBeginImageContextWithOptions last parameter to be 0.0 as this will us the device's scale
  UIGraphicsBeginImageContextWithOptions(contentSize,2.0)
  guard let context = UIGraphicsGetCurrentContext() else {
   return nil
  }

  context.setFillColor(UIColor.white.cgColor)
  context.setStrokeColor(UIColor.white.cgColor)
  context.fill(pageRect)

  context.saveGState()
  context.translateBy(x: 0,y: contentSize.height)
  context.scaleBy(x: 1.0,y: -1.0)

  context.interpolationQuality = .low
  context.setRenderingIntent(.defaultIntent)
  context.drawPDFPage(pdfPage)
  context.restoreGState()

  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()

  return image
 }

 /// print the full content of webview into one image
 ///
 /// - Important: if the size of content is very large,then the size of image will be also very large
 /// - Returns: UIImage?
 internal func printContentToImage() -> UIImage? {
  guard let pdfPage = self.printContentToPDFPage() else {
   return nil
  }

  let image = self.covertPDFPageToImage(pdfPage)
  return image
 }
}

extension UIWebView {
 public func takeScreenshotOfFullContent(_ completion: @escaping ((UIImage?) -> Void)) {
  self.scrollView.setContentOffset(CGPoint(x: 0,y: 0),animated: false)
  DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.3) {
   let renderer = WebViewPrintPageRenderer.init(formatter: self.viewPrintFormatter(),contentSize: self.scrollView.contentSize)
   let image = renderer.printContentToImage()
   completion(image)
  }
 }
}

extension WKWebView {
 public func takeScreenshotOfFullContent(_ completion: @escaping ((UIImage?) -> Void)) {
  self.scrollView.setContentOffset(CGPoint(x: 0,contentSize: self.scrollView.contentSize)
   let image = renderer.printContentToImage()
   completion(image)
  }
 }
}

WebViewPrintPageRenderer 是该方案的核心类,负责把 WebView组件内容打印到PDF,然后把PDF转换为图片。
UIWebView 和 WKWebView 则实现对应的扩展。

测试代码:

// example code
private func takeSnapshotOfUIWebView() {
 self.uiWebView.scrollView.takeScreenshotOfFullContent { (image) in
  // 处理image
 }
}

private func takeSnapshotOfWKWebView() {
 self.wkWebView.scrollView.takeScreenshotOfFullContent { (image) in
  // 处理image
 }
}

三种技术方案优劣对比

那么,这三种技术方案各自存在什么优缺点呢,适用什么场景呢?

方案一:只适用 UIWebView;若网页内容很多,生成长截图时,会占用过多内存。 所以,该方案只适合不需要支持 WKWebView, 且网页内容不会太多的场景。

方案二:适用 UIWebView 和 WKWebView,且特别适合 WKWebView。由于采用分页生成截图机制,有效减少内存占用。不过,这个方案存在一个问题:若网页存在 position: fixed 的元素(如网页头部固定的导航栏),该元素会重复出现在生成的长图上。

方案三:适用 UIWebView 和 WKWebView。其中最重要的一步——“把WebView内容打印到PDF” 是由iOS系统实现,所以该方案的性能在理论上是可以得到保障的。不过,这个方案存在一个问题:在把网页内容打印到PDF时,iOS系统获取的 contentSize 比WebView的实际contentSize 要大,从而导致生成的图片在靠近底部的内容部分和实际存在一点差异。具体可以下载运行我的长截图库 SnapshotKit的 Demo,通过其中的 UIWebView 和 WKWebView 截图示例查看具体截图效果。

以上三个方案,总的来说,解决了部分场景的需求,但都不够完美,仍需做进一步的优化。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


当我们远离最新的 iOS 16 更新版本时,我们听到了困扰 Apple 最新软件的错误和性能问题。
欧版/美版 特别说一下,美版选错了 可能会永久丧失4G,不过只有5%的概率会遇到选择运营商界面且部分必须连接到iTunes才可以激活
一般在接外包的时候, 通常第三方需要安装你的app进行测试(这时候你的app肯定是还没传到app store之前)。
前言为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下:ColorFiltered(颜色过滤器)看名字就知道是增加颜色滤镜效果的,ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.
flutter升级/版本切换
(1)在C++11标准时,open函数的文件路径可以传char指针也可以传string指针,而在C++98标准,open函数的文件路径只能传char指针;(2)open函数的第二个参数是打开文件的模式,从函数定义可以看出,如果调用open函数时省略mode模式参数,则默认按照可读可写(ios_base:in | ios_base::out)的方式打开;(3)打开文件时的mode的模式是从内存的角度来定义的,比如:in表示可读,就是从文件读数据往内存读写;out表示可写,就是把内存数据写到文件中;
文章目录方法一:分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二:给App整体添加灰色滤镜参考App页面置灰,本质是将彩色图像转换为灰度图像,本文提供两种方法实现,一种是App整体置灰,一种是单个页面置灰,可结合具体的业务场景使用。方法一:分别将图片和文字置灰一般情况下,App页面的颜色深度是24bit,也就是RGB各8bit;如果算上Alpha通道的话就是32bit,RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit,这8bit表示的颜色不是彩色,而是256
领导让调研下黑(灰)白化实现方案,自己调研了两天,根据网上资料,做下记录只是学习过程中的记录,还是写作者牛逼
让学前端不再害怕英语单词(二),通过本文,可以对css,js和es6的单词进行了在逻辑上和联想上的记忆,让初学者更快的上手前端代码
用Python送你一颗跳动的爱心
在uni-app项目中实现人脸识别,既使用uni-app中的live-pusher开启摄像头,创建直播推流。通过快照截取和压缩图片,以base64格式发往后端。
商户APP调用微信提供的SDK调用微信支付模块,商户APP会跳转到微信中完成支付,支付完后跳回到商户APP内,最后展示支付结果。CSDN前端领域优质创作者,资深前端开发工程师,专注前端开发,在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享,欢迎咨询交流,共同学习。),验证通过打开选择支付方式弹窗页面,选择微信支付或者支付宝支付;4.可取消支付,放弃支付会返回会员页面,页面提示支付取消;2.判断支付方式,如果是1,则是微信支付方式。1.判断是否在微信内支付,需要在微信外支付。
Mac命令行修改ipa并重新签名打包
首先在 iOS 设备中打开开发者模式。位于:设置 - 隐私&安全 - 开发者模式(需重启)
一 现象导入MBProgressHUD显示信息时,出现如下异常现象Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MBProgressHUD", referenced from: objc-class-ref in ViewController.old: symbol(s) not found for architecture x86_64clang: error: linker command failed wit
Profiles >> 加号添加 >> Distribution >> "App Store" >> 选择 2.1 创建的App ID >> 选择绑定 2.3 的发布证书(.cer)>> 输入描述文件名称 >> Generate 生成描述文件 >> Download。Certificates >> 加号添加 >> "App Store and Ad Hoc" >> “Choose File...” >> 选择上一步生成的证书请求文件 >> Continue >> Download。
今天有需求,要实现的功能大致如下:在安卓和ios端实现分享功能可以分享链接,图片,文字,视频,文件,等欢迎大佬多多来给萌新指正,欢迎大家来共同探讨。如果各位看官觉得文章有点点帮助,跪求各位给点个“一键三连”,谢啦~声明:本博文章若非特殊注明皆为原创原文链接。