iOS & Android 去马赛克处理
马赛克化，是一种常见的图片处理方式。主要思路是根据马赛克大小计算出该小块区域的平均颜色值，然后填充上该颜色来达到马赛克的效果。马赛克越大，图片越模糊；反之，图片越清晰。
有很多文章都提到过如何做马赛克处理。但是大家有没有想过，如何去马赛克化呢？即将马赛克的图变成原图，也就是下面这张图的效果，随着手指的涂抹，图片逐渐清晰。
说起来，实现也挺简单。但是如何想到这个思路，还得从马赛克化说起。
iOS
当时做这个效果时，并没有什么特别好的思路。于是，就去查了下在 iOS 上如何涂抹马赛克。结果令人为之一振，因为它采取了一种异常巧妙的方式。而不是按马赛克的常规处理方式，逐步计算局部颜色值进行填充。
主要思路是使用了 layer 的 mask 特性。mask 的 alpha 通道决定了显示什么内容。当它的像素不透明时，图层的内容才会显示。
做法如下：
在原图的基础上生成一整张马赛克图。
将两张图片叠加在一起，底下是原图，上边是马赛克图，设置马赛克图的
mask。因为起初 maskLayer 暂时还未设置任何路径，所以它的像素是透明的，此时马赛克图不会显示，只能看到底部的原图。随着手指涂抹，不断更新 maskLayer 的路径，这样就可以逐渐看到马赛克了。
看看，这种方式是不是将实时涂抹计算马赛克的做法简化了不少。
那么反过来，如果要将马赛克去除，可以采用同样的思路，只不过将图片位置调换一下即可。即马赛克图在下面，原图在上面。
这样就很简单的解决了问题。
Android
由于在 Android 上也需要做这种效果，猜想 Android 应该也有类似 maskLayer 的机制。于是，也去查了下 Android 的马赛克处理方式。果不其然，也是类似图层混合的原理，主要使用 PorterDuffXfermode 进行混合。
感兴趣的同学可以下载 iOS 和 Android 的 Demo 看看效果，支持传入图片和图片 url。
参考链接：
版权声明: 本文为 InfoQ 作者【liu_liu】的原创文章。
原文链接:【http://xie.infoq.cn/article/7ea09eb7c36b304545a9dc661】。文章转载请联系作者。
不要相信自己的记忆力 2017.11.13 加入
还未添加个人简介
评论