html5 canvas图片生成马赛克插件



49 193 65



特效描述:html5 canvas 图片生成 马赛克插件,html5 canvas图片生成马赛克插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src="js/close-pixelate.js"></script>

3. HTML代码

	<div class="container">
		<div class="content bgcolor-8">
			<h3 class="center">注意:文件下载到本地后在Chrome和IE浏览器中可能看不到效果<br>请使用Firefox浏览器在本地计算机查看该DEMO。</h3>
			<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>
		</div>
	</div>
	<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash焦点图 flash幻灯片 flashbanner flash图片轮播 拖动 拖拽 拖动插件 拖拽插件 焦点图 幻灯片 轮播图 bar焦点图 图片拖动 图片拖拽 马赛克幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到