前言
WebView就是一個(gè)內(nèi)嵌瀏覽器控件，在iOS中主要有兩種WebView：UIWebView和WKWebView，UIWebView是iOS2之后開(kāi)始使用，WKWebView是在iOS8開(kāi)始使用，WKWebView將逐步取代笨重的UIWebView。
由于項(xiàng)目需要，新近實(shí)現(xiàn)了一個(gè)長(zhǎng)截圖庫(kù) SnapshotKit。其中，需要支持 UIWebView、WKWebView 組件生成長(zhǎng)截圖。為了實(shí)現(xiàn)這個(gè)特性，查閱了很多資料，同時(shí)也做了不同的新奇思路嘗試，最終實(shí)現(xiàn)了一個(gè)新的、取巧的技術(shù)方案。
以下主要總結(jié)了在“WebView生成長(zhǎng)截圖”需求方面，“網(wǎng)上已有方案”和“我的全新方案”的各自實(shí)現(xiàn)要點(diǎn)和優(yōu)缺點(diǎn)。
WebView生成長(zhǎng)截圖的已有方案
根據(jù) Google 所搜索到的資料，目前iOS WebView生成長(zhǎng)截圖的方案主要有2種：
下面將會(huì)簡(jiǎn)述方案一和方案二的具體實(shí)現(xiàn)。
方案一：修改Frame，截圖組件
方案一的實(shí)現(xiàn)要點(diǎn)在于：修改 webView.scrollView 的 frameSize 為 contentSize，然后對(duì)整個(gè) webView.scrollView 進(jìn)行截圖。
不過(guò)，這個(gè)方案只適用 UIWebView 組件，因?yàn)槠涫且淮涡约虞d網(wǎng)頁(yè)所有的內(nèi)容。而 WKWebView 組件，為了節(jié)省內(nèi)存，加載網(wǎng)頁(yè)內(nèi)容時(shí)，只加載可視部分——這一點(diǎn)類(lèi)似 UITableView 組件。在修改webView.scrollView 的 frameSize 后，立即執(zhí)行了截圖操作， 這時(shí)候，WKWebView由于還沒(méi)把網(wǎng)頁(yè)的內(nèi)容加載出來(lái)，導(dǎo)致生成的長(zhǎng)截圖是空白的。
方案一核心代碼如下：
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 }}測(cè)試代碼：
// example code private func takeSnapshotOfUIWebView() { let image = self.webView.scrollView.takeSnapshotOfFullContent() // 處理image} 方案二：分頁(yè)截圖組件內(nèi)容，合成長(zhǎng)圖
方案二的實(shí)現(xiàn)要點(diǎn)在于：分頁(yè)滾動(dòng)WebView組件的內(nèi)容，然后生成分頁(yè)截圖，最后把所有分頁(yè)截圖合成一張長(zhǎng)圖。
這個(gè)方案適用于 UIWebView 組件和 WKWebView 組件。
方案二核心代碼如下：
extension UIScrollView { public func takeScreenshotOfFullContent(_ completion: @escaping ((UIImage?) -> Void)) { // 分頁(yè)繪制內(nèi)容到ImageContext let originalOffset = self.contentOffset // 當(dāng)contentSize.height<bounds.height時(shí)，保證至少有1頁(yè)的內(nèi)容繪制 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, true, 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() } } }}測(cè)試代碼：
// example codeprivate func takeSnapshotOfUIWebView() { self.uiWebView.scrollView.takeScreenshotOfFullContent { (image) in // 處理image }}private func takeSnapshotOfWKWebView() { self.wkWebView.scrollView.takeScreenshotOfFullContent { (image) in // 處理image }}WebView生成長(zhǎng)截圖的新方案
除了方案一和方案二，還有新方案嗎？
答案是肯定加確定以及一定的。
這個(gè)新方案的要點(diǎn)在于：iOS系統(tǒng)的WebView打印功能。
iOS系統(tǒng)支持把WebView的內(nèi)容打印到PDF文件上，借助這個(gè)特性，新方案的設(shè)計(jì)如下：
新方案的核心代碼如下：
import UIKitimport WebKit/// WebViewPrintPageRenderer: use to print the full content of webview into one imageinternal final class WebViewPrintPageRenderer: UIPrintPageRenderer { private var formatter: UIPrintFormatter private var contentSize: CGSize /// 生成PrintPageRenderer實(shí)例 /// /// - 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, true, 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, 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) } }} WebViewPrintPageRenderer 是該方案的核心類(lèi)，負(fù)責(zé)把 WebView組件內(nèi)容打印到PDF，然后把PDF轉(zhuǎn)換為圖片。
UIWebView 和 WKWebView 則實(shí)現(xiàn)對(duì)應(yīng)的擴(kuò)展。
測(cè)試代碼：
// example codeprivate func takeSnapshotOfUIWebView() { self.uiWebView.scrollView.takeScreenshotOfFullContent { (image) in // 處理image }}private func takeSnapshotOfWKWebView() { self.wkWebView.scrollView.takeScreenshotOfFullContent { (image) in // 處理image }}三種技術(shù)方案優(yōu)劣對(duì)比
那么，這三種技術(shù)方案各自存在什么優(yōu)缺點(diǎn)呢，適用什么場(chǎng)景呢？
方案一：只適用 UIWebView；若網(wǎng)頁(yè)內(nèi)容很多，生成長(zhǎng)截圖時(shí)，會(huì)占用過(guò)多內(nèi)存。 所以，該方案只適合不需要支持 WKWebView， 且網(wǎng)頁(yè)內(nèi)容不會(huì)太多的場(chǎng)景。
方案二：適用 UIWebView 和 WKWebView，且特別適合 WKWebView。由于采用分頁(yè)生成截圖機(jī)制，有效減少內(nèi)存占用。不過(guò)，這個(gè)方案存在一個(gè)問(wèn)題：若網(wǎng)頁(yè)存在 position: fixed 的元素（如網(wǎng)頁(yè)頭部固定的導(dǎo)航欄），該元素會(huì)重復(fù)出現(xiàn)在生成的長(zhǎng)圖上。
方案三：適用 UIWebView 和 WKWebView。其中最重要的一步——“把WebView內(nèi)容打印到PDF” 是由iOS系統(tǒng)實(shí)現(xiàn)，所以該方案的性能在理論上是可以得到保障的。不過(guò)，這個(gè)方案存在一個(gè)問(wèn)題：在把網(wǎng)頁(yè)內(nèi)容打印到PDF時(shí)，iOS系統(tǒng)獲取的 contentSize 比WebView的實(shí)際contentSize 要大，從而導(dǎo)致生成的圖片在靠近底部的內(nèi)容部分和實(shí)際存在一點(diǎn)差異。具體可以下載運(yùn)行我的長(zhǎng)截圖庫(kù) SnapshotKit 的 Demo，通過(guò)其中的 UIWebView 和 WKWebView 截圖示例查看具體截圖效果。
以上三個(gè)方案，總的來(lái)說(shuō)，解決了部分場(chǎng)景的需求，但都不夠完美，仍需做進(jìn)一步的優(yōu)化。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
