Android 截屏与 WebView 长图分享经验总结

时间  2019-11-30
标签 android 截屏 webview 分享 经验总结 栏目 Android 繁體版
原文   原文链接

最近在作新业务需求的同时，咱们在 Android 上遇到了一些以前没有碰到过的问题，截屏分享、 WebView 生成长图以及长图在各个分享渠道分享时图片模糊甚至分享失败等问题，在这过程当中踩了不少坑，到目前为止绝大部分的问题都还算是有了比较满意的解决方案。如下就从三个方面来总结一下过程当中遇到的挑战和最后的解决方案。前端

1、概述

最近在作新业务需求的同时，咱们在 Android 上遇到了一些以前没有碰到过的问题，截屏分享、 WebView 生成长图以及长图在各个分享渠道分享时图片模糊甚至分享失败等问题，在这过程当中踩了不少坑，到目前为止绝大部分的问题都还算是有了比较满意的解决方案。如下就从三个方面来总结一下过程当中遇到的挑战和最后的解决方案。android

2、截图分享

在 Android 原生系统中是没有提供截图的广播或者监听事件的，也就是说代码层面没法获知用户的截屏操做，这样就没法知足用户截屏后跳出分享提示的需求。既然没法从根本上解决截屏监听的问题，那么就要考虑经过其余方式间接实现，目前比较成熟稳定的方案是监听系统媒体数据库资源的变化，具体方案原理以下：web

Android 系统有一个媒体数据库，每拍一张照片，或使用系统截屏截取一张图片，都会把这张图片的详细信息加入到这个媒体数据库，并发出内容改变通知，咱们能够利用内容观察者（ContentObserver）监听媒体数据库的变化，当数据库有变化时，获取最后插入的一条图片数据，若是该图片符合特定的规则，则认为被截屏了。面试

考虑到手机存储包括内部存储器和外部存储器，为了加强兼容性，最好同时监听两种储存空间的变化，如下是须要 ContentObserver 监听的资源 URI :数据库

MediaStore.Images.Media.INTERNAL_CONTENT_URI
MediaStore.Images.Media.EXTERNAL_CONTENT_URI
复制代码

读取外部存储器资源，须要添加权限:canvas

android.permission.READ_EXTERNAL_STORAGE
复制代码

注：在 Android 6.0 及以上版本须要动态申请权限浏览器

1. 截屏判断规则

当 ContentObserver 监听到媒体数据库的数据改变, 在有数据改变时获取最后插入数据库的一条图片数据, 若是符合如下规则, 则认为截屏了:缓存

时间判断：一般截屏生成后会立马存入系统多媒体数据库，也就是说监听到数据库变化的时间与截图生成的时间不会相差太多，这里推荐以10秒做为阈值，固然这个也是经验值。 尺寸判断：截屏顾名思义取得是当前手机屏幕尺寸大小的图片，因此图片宽高大于屏幕宽高的确定都不是截图产生的。 路径判断：因为各手机厂家存放截图的文件路径都不太同样，国内状况可能会更严重，可是一般图片保存路径都会包含一些常见的关键词，好比 “screenshot”、 “screencapture” 、 “screencap” 、 “截图”、 “截屏”等，每次都检查图片路径信息是否包含这些关键词。 关于第3点须要补充说明一下，因为要判断图片文件路径是否包含关键字，因此目前仅支持中英文环境，若是须要支持其余语言，须要手动添加一些该语言的关键词，不然有可能获取不到图片。 以上3点基本上能够保证截图的正常监听，固然在实际测试过程当中，还会发现有些机型存在多报的状况，因此还须要作一些去重等工做，关于去重下面还会再说起。安全

2. 关键代码

原理都了解清楚了，那么接下来就是如何实现的问题了。这里最关键是媒体内容观察者的设置，从数据库中取出第一条数据并解析图片信息，而后再检验图片信息是否符合以上3条规则。bash

为了说清楚如何监听媒体数据库改变，先要稍微讲一下 ContentObserver 的原理。 ContentObserver ——内容观察者，目的是观察（捕捉）特定 Uri 引发的数据库的变化，继而作一些相应的处理，它相似于数据库技术中的触发器（Trigger），当 ContentObserver 所观察的 Uri 发生变化时，便会触发它。固然想要观察就必须先要注册， Android 系统提供了 ContentResolver#registerContentObserver 方法用来注册观察器。此部分不熟悉的同窗能够温习一下 Android 的 ContentProvider 相关知识。

接下来直接用代码说明整个注册和触发流程，代码以下：

private void initMediaContentObserver() {
    // 运行在 UI 线程的 Handler, 用于运行监听器回调 
    private final Handler mUiHandler = new Handler(Looper.getMainLooper());
    // 建立内容观察者，包括内部存储和外部存储
    mInternalObserver = new MediaContentObserver(MediaStore.Images.Media.INTERNAL_CONTENT_URI, mUiHandler);
    mExternalObserver = new MediaContentObserver(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, mUiHandler);
    // 注册内容观察者
    mContext.getContentResolver().registerContentObserver(
            MediaStore.Images.Media.INTERNAL_CONTENT_URI, false, mInternalObserver);
    mContext.getContentResolver().registerContentObserver(
            MediaStore.Images.Media.EXTERNAL_CONTENT_URI, false, mExternalObserver);
}
 
/**
 * 自定义媒体内容观察者类(观察媒体数据库的改变)
 */
private class MediaContentObserver extends ContentObserver {
    private Uri mediaContentUri;       // 须要观察的Uri
    public MediaContentObserver(Uri contentUri, Handler handler) {
        super(handler);
        mediaContentUri = contentUri;
    }
    @Override
    public void onChange(boolean selfChange) {
        super.onChange(selfChange);
        // 处理媒体数据库反馈的数据变化
        handleMediaContentChange(mediaContentUri);
    }
}
复制代码

有注册就须要在 Activity 销毁时取消注册，因此还须要封装一个解除注册的方法供外部调用， Android 系统提供 ContentResolver#unregisterContentObserver 方法来取消注册，代码比较简单，这里就再也不展现了。

监听器设置和注册完成后，一旦用户操做了截屏动做，系统就会执行 ContentObserver#onChange 回调方法，在这个方法中咱们能够根据 Uri 获取并解析数据。这里展现一下具体的数据解析过程，上述提到的规则判断比较简单，就再也不展现了。

private void handleMediaContentChange(Uri contentUri) {
	Cursor cursor = null;
        try {
            // 数据改变时查询数据库中最后加入的一条数据
            cursor = mContext.getContentResolver().query(contentUri,
                    Build.VERSION.SDK_INT < 16 ? MEDIA_PROJECTIONS : MEDIA_PROJECTIONS_API_16,
                    null, null, MediaStore.Images.ImageColumns.DATE_ADDED + " desc limit 1");
            if (cursor == null)  return;
            if (!cursor.moveToFirst()) return;       
            // cursor.getColumnIndex获取数据库列索引
            int dataIndex = cursor.getColumnIndex(MediaStore.Images.ImageColumns.DATA);
            String data = cursor.getString(dataIndex);        // 图片存储地址

            int dateTakenIndex = cursor.getColumnIndex(MediaStore.Images.ImageColumns.DATE_TAKEN);
            long dateTaken = cursor.getLong(dateTakenIndex);  // 图片生成时间

            int width = 0;
            int height = 0;
            if (Build.VERSION.SDK_INT >= 16) {
                int widthIndex = cursor.getColumnIndex(MediaStore.Images.ImageColumns.WIDTH);
                int heightIndex = cursor.getColumnIndex(MediaStore.Images.ImageColumns.HEIGHT);
                width = cursor.getInt(widthIndex);    // 获取图片高度
                height = cursor.getInt(heightIndex);  // 获取图片宽度
            } else {
                Point size = getImageSize(data);     // 根据路径获取图片宽和高
                width = size.x;
                height = size.y;
            }
            // 处理获取到的第一行数据，分别判断路径是否包含关键词、时间差以及图片宽高和屏幕宽高的大小关系
            handleMediaRowData(data, dateTaken, width, height);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (cursor != null && !cursor.isClosed()) {
                cursor.close();
            }
        }
}
复制代码

有些手机 ROM 截屏一次会发出屡次内容改变的通知，所以须要作去重操做，去重也不复杂，能够用列表缓存最近十几条图片地址数据，每次获取到新的图片地址，都会先判断缓存中是否存在相同的图片地址，若是当前的图片地址已经存在列表中，则直接过滤掉便可，不然添加到缓存中。如此就能够保证截屏监听事件既不遗漏也不重复。

以上就是手机截屏的核心原理和关键代码，若是须要分享截屏图片也很简单， data 即为图片的存储地址，转换成 Bitmap 便可完成分享。

2、WebView 生成长图

介绍 web 长图以前，先来讲一下单屏图片的生成方案，和手机截图不一样的是生成的图片不会显示顶部的状态栏、标题栏以及底部的菜单栏，能够知足不一样的业务需求。

// WebView 生成当前屏幕大小的图片，shortImage 就是最终生成的图片

Bitmap shortImage = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(shortImage);   // 画布的宽高和屏幕的宽高保持一致
Paint paint = new Paint();
canvas.drawBitmap(shortImage, screenWidth, screenHeight, paint);
mWebView.draw(canvas);
复制代码

有的时候咱们须要将一个长 Web 网页生成图片分享出去，类似的例子就是手机端的各类便签应用，当便签内容超出一屏时，就须要将全部的内容生成一张长图对外分享出去。

WebView 和其余 View 同样，系统都提供了 draw 方法，能够直接将 View 的内容渲染到画布上，有了画布咱们就能够在上面绘制其余各类各类的内容，好比底部添加 Logo 图片，画红线框等等。关于 WebView 生成长图网上已经有不少现成的方案和代码，如下代码是经测试过的稳定版本，供参考。

// WebView 生成长图，也就是超过一屏的图片，代码中的 longImage 就是最后生成的长图

mWebView.measure(MeasureSpec.makeMeasureSpec(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED),
                 MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
mWebView.layout(0, 0, mWebView.getMeasuredWidth(), mWebView.getMeasuredHeight());
mWebView.setDrawingCacheEnabled(true);
mWebView.buildDrawingCache();
Bitmap longImage = Bitmap.createBitmap(mWebView.getMeasuredWidth(),
        mWebView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(longImage);	// 画布的宽高和 WebView 的网页保持一致
Paint paint = new Paint();
canvas.drawBitmap(longImage, 0, mWebView.getMeasuredHeight(), paint);
mWebView.draw(canvas);
复制代码

Android 为了提升滚动等各方面的绘制速度，能够为每个 View 创建一个缓存，使用 View#buildDrawingCache 为本身的 View 创建相应的缓存， 这个 cache 就是一个 bitmap 对象。利用这个功能能够对整个屏幕视图进行截屏并生成 Bitmap ，也能够得到指定的 View 的 Bitmap 对象。这里因为还要在原有的图片上绘制 Logo ，因此直接使用了 WebView 的 draw 方法了。

因为咱们的 H5 页面大部分都是运行在微信的 X5 浏览器中，因此为了减小前端的适配工做，咱们将腾讯的 X5 浏览器内核引入了 Android 工程中，代替系统原生的 WebView 内核，关于 X5 内核的引入后续还会有专门的文章介绍，敬请期待。

这里须要说明一下如何在 X5 内核下生成 Web 长图，上面代码展现的系统原生 WebView 生成图片的方案，可是在 X5 环境下上述代码就失效了，通过踩坑以及查看 X5 内核源代码，最终咱们找到了解决该问题的方法，下面用关键代码来讲明一下具体的实现方式。

// 这里的 mWebView 就是 X5 内核的 WebView ，代码中的 longImage 就是最后生成的长图

// 这里的 mWebView 就是 X5 内核的 WebView ，代码中的 longImage 就是最后生成的长图
mWebView.measure(MeasureSpec.makeMeasureSpec(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED),
                 MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
mWebView.layout(0, 0, mWebView.getMeasuredWidth(), mWebView.getMeasuredHeight());
mWebView.setDrawingCacheEnabled(true);
mWebView.buildDrawingCache();
Bitmap longImage = Bitmap.createBitmap(mWebView.getMeasuredWidth(),
        mWebView.getMeasuredHeight() + endHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(longImage);	// 画布的宽高和 WebView 的网页保持一致
Paint paint = new Paint();
canvas.drawBitmap(longImage, 0, mWebView.getMeasuredHeight(), paint);
float scale = getResources().getDisplayMetrics().density;
x5Bitmap = Bitmap.createBitmap(mWebView.getWidth(), mWebView.getHeight(), Bitmap.Config.ARGB_8888);
Canvas x5Canvas = new Canvas(x5Bitmap);
x5Canvas.drawColor(ContextCompat.getColor(this, R.color.fragment_default_background));
mWebView.getX5WebViewExtension().snapshotWholePage(x5Canvas, false, false);  // 少了这行代码就没法正常生成长图
Matrix matrix = new Matrix();
matrix.setScale(scale, scale);
longCanvas.drawBitmap(x5Bitmap, matrix, paint);
复制代码

注：X5 内核生成的长图清晰度比原生 WebView 要差一些，目前尚未太好的解决方案。

3、长图分享

通常咱们向各个社交平台上发送的图片都比较小，最大也就是手机屏幕大小的图片，再大的就很少见了。可是也有例外，好比微博的长图、锤子便签的长图等等，若是直接将这些图片经过微信分享 SDK 或者微博分享 SDK 分享出去，就会发现图片基本上都是模糊的，可是将图片发送给 iPhone 手机就能够正常查看，咱们只能哀叹 Android 版微信不给力。

微信 SDK 不给力，可是产品体验仍是不能丢，怎么办呢？办法仍是有的，咱们都知道除了各个社交平台本身的分享 SDK ，系统提供了原生分享方案，本质上就是社交平台把目标 Activity 对外暴露了出来，而后第三方 App 就能够根据事先定义好的 Intent 跳转规则唤起社交平台，同时完成数据传输和展现。

好像问题能够完美解决了，可是仍是有坑须要接着踩。在 Android 7.0 及以上的版本系统限制了 Intent 传输 file:// 开头的数据，这也就限制了系统原生分享单图，怎么办呢？两种方案，一种是在 7.0 及以上版本上使用微信等分享 SDK ，接受分享图片模糊的现状，另外一种是经过反射跳过系统对以 file:// 开头文件在 Intent 中传输的限制，可是这种方式会有风险，毕竟咱们不知道将来 Android 会作出什么调整。如下是跳过系统限制的代码片断，供参考。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
    try {
        Method ddfu = StrictMode.class.getDeclaredMethod("disableDeathOnFileUriExposure");
        ddfu.invoke(null);
    } catch (Exception e) {
    }
}
复制代码

至此基本上能够知足任意图片大小的分享了。此外通过验证还发现微信分享 Android 版 SDK 对缩略图和分享图的大小都有限制，官方给的指导意见是缩略图小于 32K ，分享图片小于 10M 便可正常分享，可是试验下来这两个值都是理论上限，不要太接近这个上限，若是图片太大，缩略图和分享图都会出现模糊的状况，甚至没法正常分享，固然对于经过系统分享的话就不存在这个限制，图片也比较清晰。

除了图片大小有限制，缩略图的尺寸也是有限制的，这一点官方文档并无给出，试验结果显示图片尺寸小于等于120×120是比较安全的范围，分享都没有问题。

4、小结

截屏监听、 WebView 生成长图以及长图分享都是咱们团队以前不曾遇到过的业务需求，在知足产品业务需求的同时，也踩了不少坑，积累了一些经验，特此总结。

关于更多

NDK项目实战—高仿360手机助手之卸载监听

最新2017（Android）面试题级答案（精选版）

相信本身，没有作不到的，只有想不到的

微信公众号：终端研发部

技术+职场
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程