HTML5 canvas生成图片马赛克Demo源代码下载

分享一个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