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