为图片添加马赛克效果

工作原理

图像被分割成规则的方形小块网格;对每个小块,先计算其中所有像素的平均颜色,然后在原位置绘制一个该纯色的方块(或圆角方块),并在其周围加上所选颜色的缝隙,以模仿瓷砖的外观。

应该选择多大的小块?

较小的小块(8 到 16 px)在带来轻微像素化效果的同时,能很好地保持原图的可辨认度;较大的小块(50 px 及以上)则产生非常抽象的效果,近看时原图变得难以辨认。

缝隙有什么用?

缝隙会在每个小块之间增加可见的间距,强化瓷砖或实体马赛克的效果。把缝隙宽度设为 0,即可得到小块之间没有分隔的纯像素化效果。

平均色的计算和最终渲染都完全在您的浏览器中进行,不会把您的图片上传到服务器。