［程序员日记］iOS截图（3）截取网页片段

在前两篇文章中由一个分享第三方需要绘制图片出发，并引申到截取滚动视图长屏。经常逛简书APP的人都知道，简书还有一个功能，可以选取文章中的片段，然后生成图片分享。本文探讨如何截取网页中的片段，仿简书APP。

iOS截图（1）生成分享图片
iOS截图（2）生成长图

本文效果预览：

效果预览

既然要和网页操作，就离不开与javaScript交互。实现的思路就是

1.获取截取的内容
2.显示截图

1.获取截取的内容

获取选中内容，既然在网页中，需要js实现。

function getSelectedText() {
    
    var txt;

    if (window.getSelection) { 
       var range=window.getSelection().getRangeAt(0); 
       var container = window.document.createElement('div'); 
       container.appendChild(range.cloneContents()); 
       txt = container.innerHTML; 
    } else if (window.document.getSelection) { 
       var range=window.getSelection().getRangeAt(0); 
       var container = window.document.createElement('div'); 
       container.appendChild(range.cloneContents()); 
       txt = container.innerHTML; 
    } else if (window.document.selection) { 
       txt = window.document.selection.createRange().htmlText; 
    } 
    retutn txt; 
 }

给WKWebView注入一段自己写的JavaScript脚本，这段JavaScript代码的含义就是获取当前页面选取的内容包含html标签。

使用[_webView evaluateJavaScript:js completionHandler:^(id _Nullable cutTxt, NSError * _Nullable error) {}]方法执行javascript，并获取内容，执行完毕后，cutText即为获取的html内容。

2.显示截图

获取完选中的内容，接下来就是绘制view，然后生成图片了，绘制的view依然使用wkWebView。

点击分享截图，即生成图片。

要绘制webView，为了方便，我们讲css样式都写好一个html文件放到项目中，然后将步骤1中获取的内容放入其中即可。

调用js方法传入内容，依然使用[_webView evaluateJavaScript:js completionHandler:^(id _Nullable, NSError * _Nullable error) {}]方法。

如图，要分享的view就绘制出来了，接下来就要截图了。

截图的方法要写在两个函数中。

UIGraphicsBeginImageContext(imageSize);
UIGraphicsEndImageContext();

根据创建的view（即webView），获取view的宽高，然后生成图片。

   CGContextRef currentContext = UIGraphicsGetCurrentContext();
   CGContextTranslateCTM(currentContext, - CGRectGetMinX(rect), - CGRectGetMinY(rect));
   [self.layer renderInContext:currentContext];
   UIImage *snapshotImage =           UIGraphicsGetImageFromCurrentImageContext();

即snapshotImage为所生成的图片，接下来就是对图片进行操作，可以保存在相册中或上传。

生成的图片为：

生成图片

补充：

1.获取图片内容

当我们获取的内容为纯文字时使用上述方法是可行的，但是如果内容包含图片就会出现问题，因为在html中图片地址是相对地址。要想获取图片的路径，需要对其进行地址拼接。

需要将"file://"替换成网页的绝对路径,获取当前网页的URL可以用:

NSString * url = request.URL.absoluteString;

2.改变夜间模式

可以通过css改变当前的样式，即白天模式模式和夜间模式。这个功能会陆续完善。

由此仿照简书截取网页部分内容的功能就圆满完成了，虽然本文命名为截取网页图拍呢，但探讨的重心不在如何截图，而在iOS与javascript的交互。webView（本文使用wkWebView）的坑还有很多，随着项目的深入与其接触也越来越多，一起来填坑吧！

Demo地址：https://github.com/KeyLiu/LQCutWebPic

文章优先发表于：http://keyliu.com
转载请注明出处。