公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
在电视上我们经常看到打有马赛克的嫌疑犯。另外微信朋友圈中的照片红包也红极一时，那么如何使用 JavaScript 来实现图片马赛克呢？下面我们将借助一款js插件来实现该功能！
pixelator.js 是一款可以用来将图片制作成马赛克效果的js插件。该插件的灵感来自于美国肖像画家Chuck Close。官方地址：http://www.benjaminkeen.com/category/projects/thepixelator/
pixelator.js 使用方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>业余草：http://www.xttblog.com</title>
</head>
<body>
<img id="portrait-image" src="img/portrait.jpg" />
<script>
function init() {
document.getElementById('portrait-image').closePixelate([
{ resolution : 24 },
{ shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);
};
window.addEventListener( 'load', init, false);
</script>
</body>
</html>
在上面的例子中，第一组参数{ resolution : 24 }控制脚本每24像素就画一个大的正方形像素，然后为每一个正方形像素的中心填充一个精确的颜色值。
第二组参数使用了所有的可用参数：{ shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }。和第一组参数一样，它的分辨率是24px，像素的形状是圆形，每一个圆形的大小是16像素，每一个圆形的右边都有12像素的偏移量，最后这个圆形的透明度被设置为50%。
pixelator.js 可用参数
- resolution ：被渲染像素之间的距离。必须设定。
- shape ：像素的形状。可选值：square、circle 和 diamond，默认值：square。可选。
- size ：渲染像素的大小。可选。默认值为resolution。
- offset ：像素之间的偏移值。可选，默认值为0.可以只设置一个值，这时为对角偏移。也可以设置为一个数组或对象：[ 15, 5 ]或{ x: 15, y: 5 }。
- alpha ：渲染像素的透明度，可选，默认值为1。
pixelator.js Canvas 马赛克 运行效果
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 使用 pixelator.js 实现图片马赛克功能