WebView截长图解决方案

作者:Windin 贝聊移动Android工程师

链接:

http://www.jianshu.com/p/0faa70e88441

前言:本文主要讲述了以下两个方面:

1. 普通WebView如何截取长图
2. 针对X5内核中WebView如何截取长图
日常开发中,遇到为WebView截取长图算是一种常见的需求。网上聪明的程序员们提供了多种截取WebView长图的方法,这为我们的开发提供了很多便利。
现在,也有很多APP是集成了X5内核的,网上对于X5内核的截长图方案介绍比较少,所以这里我整理了对WebView截取长图的比较通用可行的方法,并且对使用了x5内核的WebView的截图方法进行分享。

1
普通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;
}

2
X5内核截取长图
使用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的方法,使用的时候要做好异常处理。

3
总结
以上是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做处理 */
    }
}


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值