android马赛克,iOS & Android 去马赛克处理

马赛克化，是一种常见的图片处理方式。主要思路是根据马赛克大小计算出该小块区域的平均颜色值，然后填充上该颜色来达到马赛克的效果。马赛克越大，图片越模糊；反之，图片越清晰。

有很多文章都提到过如何做马赛克处理。但是大家有没有想过，如何去马赛克化呢？即将马赛克的图变成原图，也就是下面这张图的效果，随着手指的涂抹，图片逐渐清晰。

example.gif

说起来，实现也挺简单。但是如何想到这个思路，还得从马赛克化说起。

iOS

当时做这个效果时，并没有什么特别好的思路。于是，就去查了下在 iOS 上如何涂抹马赛克。结果令人为之一振，因为它采取了一种异常巧妙的方式。而不是按马赛克的常规处理方式，逐步计算局部颜色值进行填充。

主要思路是使用了 layer 的 mask 特性。mask 的 alpha 通道决定了显示什么内容。当它的像素不透明时，图层的内容才会显示。

做法如下：

在原图的基础上生成一整张马赛克图。

将两张图片叠加在一起，底下是原图，上边是马赛克图，设置马赛克图的 mask。因为起初 maskLayer 暂时还未设置任何路径，所以它的像素是透明的，此时马赛克图不会显示，只能看到底部的原图。

随着手指涂抹，不断更新 maskLayer 的路径，这样就可以逐渐看到马赛克了。

看看，这种方式是不是将实时涂抹计算马赛克的做法简化了不少。

那么反过来，如果要将马赛克去除，可以采用同样的思路，只不过将图片位置调换一下即可。即马赛克图在下面，原图在上面。

这样就很简单的解决了问题。

Android

由于在 Android 上也需要做这种效果，猜想 Android 应该也有类似 maskLayer 的机制。于是，也去查了下 Android 的马赛克处理方式。果不其然，也是类似图层混合的原理，主要使用 PorterDuffXfermode 进行混合。

感兴趣的同学可以下载 iOS 和 Android 的 Demo 看看效果，支持传入图片和图片 url。

参考链接：