HTML5 canvas生成图片马赛克Demo源代码下载
2015-02-08 14:10:32  By: shinyuu

• shinyuu
• JavaScript教程
• 0
• 6272
• 1

分享一个html5制作的图片马赛克Demo、效果非常不错、可自己调整马赛克的强度的哈、可以用在图片处理方面的程序上面、比如在幻灯片上面使用、先看看Demo的效果

HTML代码

<p class="center">
Change pixel resolution 
<input type="range" min="4" max="100" value="32" id="range" />
<span id="output">32</span>
</p>
<div class="thumb">
	<img src="img/1.jpg" id="dolly1" />
	<img src="img/2.jpg" id="dolly2" />
	<img src="img/3.jpg" id="dolly3" />
 </div>

JS代码

<script src="js/close-pixelate.js"></script>
<script>
window.onload = function() {
  var dolly1 = document.getElementById(´dolly1´)
  var dolly2 = document.getElementById(´dolly2´)
  var dolly3 = document.getElementById(´dolly3´)
  var pixelOpts = [ { resolution: 32 } ]
  var pixelDolly1 = dolly1.closePixelate( pixelOpts )
  var pixelDolly2 = dolly2.closePixelate( pixelOpts )
  var pixelDolly3 = dolly3.closePixelate( pixelOpts )
  var range = document.getElementById(´range´)
  var output = document.getElementById(´output´)

  range.addEventListener( ´change´, function( event ) {
	var res = parseInt( event.target.value, 10 )
	res = Math.floor( res / 2 ) * 2
	res = Math.max( 4, Math.min( 100, res ) )
	output.textContent = res
	// console.log( res );
	pixelOpts = [ { resolution: res } ]
	pixelDolly1.render( pixelOpts )
	pixelDolly2.render( pixelOpts )
	pixelDolly3.render( pixelOpts )
  }, false )
}
</script>

最后贴上Demo的源代码、有兴趣的朋友可以研究一下、还是非常不错的功能

源代码链接: http://dwtedx.com/download.html?bdkey=s/1jG3QgMa 密码: u31p

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛