iOS & Android 去马赛克处理

用户头像
liu_liu
关注
发布于: 2020 年 06 月 27 日

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



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





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



iOS



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



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



做法如下:

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

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

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



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



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



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



Android



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



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



参考链接:





发布于: 2020 年 06 月 27 日 阅读数: 43
用户头像

liu_liu

关注

不要相信自己的记忆力 2017.11.13 加入

还未添加个人简介

评论

发布
暂无评论
iOS & Android 去马赛克处理