html5 canvas圖片生成馬賽克插件



54 214 72



特效描述: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

加群請備注:從官網了解到

老夫子电子