作者：风流倜傥的段老师 蓝田大营
一、概述
最近在做新业务需求的同时，我们在 Android 上遇见了一些之前没有遇到过的问题，截屏分享、 WebView 生成长图以及长图在各个分享渠道分享时图片模糊甚至分享失败等问题，在这过程中踩了好多坑，到目前为止绝大部分的问题都还算是有了比较满意的解决方案。以下就从三个方面来总结一下过程中遇见的挑战和最后的解决方案。
二、截图分享
在 Android 原生系统中是没有提供截图的广播或则窃听风波的，也就是说代码层面难以得知用户的截屏操作，这样就难以满足用户截屏后跳出分享提示的需求。既然没法从根本上解决截屏窃听的问题，那么就要考虑通过其他方法间接实现，目前比较成熟稳定的方案是窃听系统媒体数据库资源的变化，具体方案原理如下：
Android 系统有一个媒体数据库，每拍一张相片，或使用系统截屏截取一张图片，都会把这张图片的详尽信息加入到这个媒体数据库，并发出内容改变通知，我们可以借助内容观察者（ContentObserver）监听媒体数据库的变化，当数据库有变化时，获取最后插入的一条图片数据，如果该图片符合特定的规则，则觉得被截屏了。
考虑到手机储存包括内部存储器和外部存储器，为了提高兼容性，最好同时窃听两种存储空间的变化，以下是须要 ContentObserver 监听的资源 URI :
MediaStore.Images.Media.INTERNAL_CONTENT_URI
MediaStore.Images.Media.EXTERNAL_CONTENT_URI读取外部存储器资源，需要添加权限:
android.permission.READ_EXTERNAL_STORAGE注：在 Android 6.0 及以上版本须要动态申请权限1. 截屏判定规则
当 ContentObserver 监听到媒体数据库的数据改变, 在有数据改变时获取最后插入数据库的一条图片数据, 如果符合以下规则, 则觉得截屏了:
时间判定：通常截屏生成后会立刻存入系统多媒体数据库，也就是说窃听到数据库变化的时间与截图生成的时间不会相差太多，这里推荐以10秒作为阀值，当然这个也是经验值。尺寸判定：截屏顾名思义取得是当前手机屏幕规格大小的图片，所以图片宽高小于屏幕宽高的肯定都不是截图形成的。路径判定：由于各手机厂家储存截图的文件路径都不太一样，国内情况可能会更严重，但是一般图片保存路径就会包含一些常见的关键词，比如 "screenshot"、 "screencapture" 、 "screencap" 、 "截图"、 "截屏"等，每次都检测图片路径信息是否包含那些关键词。关于第3点须要补充说明一下，由于要判定图片文件路径是否包含关键字，所以目前支持中英文环境，如果须要支持其他语言，需要自动添加一些该语言的关键词，否则有可能获取不到图片。
以上3点基本上可以保证截图的正常窃听，当然在实际测试过程中，还会发觉有些型号存在多报的情况，所以还须要做一些去重等工作，关于去重下边就会再提到。
2. 关键代码
原理都了解清楚了，那么接出来就是怎样实现的问题了。这里最关键是媒体内容观察者的设置，从数据库中取出第一条数据并解析图片信息，然后再检验图片信息是否符合以上3条规则。
为了说清楚怎么窃听媒体数据库改变，先要稍为讲一下 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 即可完成分享。
二、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.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 要差一些，目前还没有太好的解决方案。三、长图分享
一般我们向各个社交平台上发送的图片都比较小，最大也就是手机屏幕大小的图片，再大的就不多见了。但是也有例外，比如微博的长图、锤子便签的长图等等，如果直接将这种图片通过陌陌分享 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 即可正常分享，但是试验出来这两个值都是理论上限，不要太接近这个上限，如果图片太大，缩略图和分享图就会出现模糊的情况，甚至难以正常分享，当然对于通过系统分享的话就不存在这个限制，图片也比较清晰。
除了图片大小有限制，缩略图的规格也是有限制的，这一点官方文档并没有给出，试验结果显示图片规格大于等于120x120是比较安全的范围，分享都没有问题。
四、小结
截屏窃听、 WebView 生成长图以及长图分享都是我们团队之前从未遇见过的业务需求，在满足产品业务需求的同时，也踩了好多坑，积累了一些经验，特此总结。
我们积极拥抱新技术，不给自己设边界，勇于跳出舒适区
iOS/Android 开发可投简历至 liangfei@youzan.com（微信：feelang ）
