文末赠书 | WebView截长图解决方案
本文作者
作者：Windin 贝聊移动Android工程师
链接：
http://www.jianshu.com/p/0faa70e88441
本文由作者授权发布。
前言：本文主要讲述了以下两个方面：
1. 普通WebView如何截取长图
2. 针对X5内核中WebView如何截取长图
日常开发中，遇到为WebView截取长图算是一种常见的需求。网上聪明的程序员们提供了多种截取WebView长图的方法，这为我们的开发提供了很多便利。
现在，也有很多APP是集成了X5内核的，网上对于X5内核的截长图方案介绍比较少，所以这里我整理了对WebView截取长图的比较通用可行的方法，并且对使用了x5内核的WebView的截图方法进行分享。
普通WebView截取长图，这里是指项目中没有集成X5内核的情况。利用Google文档上的api可以顺利截图。以Android5.0为版本分界线，截图采用不同的处理方式。
1. Android5.0以下版本
/**
* 对WebView进行截屏，虽然使用过期方法，
* 但在当前Android版本中测试可行
* @param webView
* @return
*/
private static Bitmap captureWebViewKitKat(WebView webView) {
Picture picture = webView.capturePicture();
int width = picture.getWidth();
int height = picture.getHeight();
if (width > 0 && height > 0) {
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
picture.draw(canvas);
return bitmap;
}
return null;
}
}
2. Android5.0及以上版本
在Android5.0及以上版本，Android对WebView进行了优化，为了减少内存使用和提高性能，使用WebView加载网页时只绘制显示部分。
如果我们不做处理，仍然使用上述代码截图的话，就会出现只截到屏幕内显示的WebView内容，其它部分是空白的情况。
这时候，我们通过调用WebView.enableSlowWholeDocumentDraw()方法可以关闭这种优化，但要注意的是，该方法需要在WebView实例被创建前就要调用，否则没有效果。
所以我们在WebView实例被创建前加入代码：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
android.webkit.WebView.enableSlowWholeDocumentDraw();
}
根据Google文档中描述，capturePicture()方法已不鼓励使用，推荐我们通过webView的onDraw(Canvas)去获取图像，所以这里我们去拿到网页的宽高后，就调用webView.draw(Canvas)方法生成webView截图。
private void captureWebViewLollipop(WebView webView) {
float scale = webView.getScale();
int width = webView.getWidth();
int height = (int) (webView.getContentHeight() * scale + 0.5);
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
webView.draw(canvas);
return bitmap;
}
使用X5内核截取长图有两种方法，并且都可以不用考虑版本问题，这为我们提供了方便。在X5内核下，如果使用WebView的onDraw(Canvas)方法，会出现或多或少的问题，所以对这个方法弃坑了。以下是两个截图方法：
1. 使用X5内核方法snapshotWholePage(Canvas, boolean, boolean)
在X5内核中提供了一个截取整个WebView界面的方法snapshotWholePage(Canvas, boolean, boolean)，但是这个方法有个缺点，就是不以屏幕上WebView的宽高截图，只是以WebView的contentWidth和contentHeight为宽高截图，所以截出来的图片会不怎么清晰，但作为缩略图效果还是不错了。
private static Bitmap captureX5WebViewUnsharp(Context context, WebView webView) {
if (webView == null) {
return null;
}
if (context == null) {
context = webView.getContext();
}
int width = webView.getContentWidth();
int height = webView.getContentHeight();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
webView.getX5WebViewExtension().snapshotWholePage(canvas, false, false);
return bitmap;
}
2. 使用capturePicture()截取清晰长图
如果想要在X5内核下截到清晰的长图，不能使用snapshotWholePage()，依然可以采用capturePicture()。X5内核下使用capturePicture()进行截图，可以直接拿到WebView的清晰长图，但这是个Deprecated的方法，使用的时候要做好异常处理。
以上是WebView截长图方法的总结和分享，对X5内核的截图也是尝试了多种途径最后找到满意的解决方案。另外，截长图会占用大量内存，容易触发OOM，所以代码中也要注意对OOM的处理。
在使用了X5内核的项目中，使用WebView截取长图的判断逻辑可以是：
// 有x5内核没有生效，并且Android版本是5.0及以上时，调用enableSlowWholeDocumentDraw()方便截取长图
if (!isX5Enabled() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
android.webkit.WebView.enableSlowWholeDocumentDraw();
}
/* 创建WebView ×／
...
/*网页截图*/
public void captureWholePage() {
try {
Bitmap bitmap = captureWebView();
/* 对拿到的bitmap根据需要进行处理 */
} catch (OutOfMemoryError oom) {
/* 对OOM做处理 */
}
}
下面是一个赠书活动：
安晓辉老师的新书《程序员的成长课》已经开售了，该书汇总了他十几年开发管理经验以及 100 多个开发者咨询案例，总结出了行之有效的自我提升和选择方法。
书的内容分两部分：
前 4 章聚焦开发者价值成长，分别介绍了选择技术方向的思维和工具、让你持续精进技术的个人对标管理法、成为技术管理者的 4 种途径、技术管理新人面临的 18 种挑战
后 4 章侧重开发者的职业选择，从实战角度出发，讨论了跳槽、简历优化、薪水谈判、转型等关键话题。
如果你渴望改变和提升，那么可以用这本书里介绍的理念、方法、工具指导自己的工作和生活，通过努力和认真执行，让改变在你身上发生。
该书出版后，安老师赠送了三本让我在公众号送给大家，获取方式很简单，依然是留言获赞最多的三位~（ps：截止到晚上10点，留言超过100就无法放出啦，还有大概已经有30位关注者获得过图书了，就不重复赠送了）~~
上一篇：开发一款商业级Banner控件
有关Android应用桌面角标(BadgeNumber)实现的探讨