使用 pixelator.js 实现图片马赛克功能

HTML5 herman 2377浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在电视上我们经常看到打有马赛克的嫌疑犯。另外微信朋友圈中的照片红包也红极一时,那么如何使用 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 马赛克 运行效果

Canvas 马赛克效果

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用 pixelator.js 实现图片马赛克功能