在前两篇文章中由一个分享第三方需要绘制图片出发，并引申到截取滚动视图长屏。经常逛简书APP的人都知道，简书还有一个功能，可以选取文章中的片段，然后生成图片分享。本文探讨如何截取网页中的片段，仿简书APP。
本文效果预览：
效果预览
既然要和网页操作，就离不开与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
转载请注明出处。
网友评论