效果請點擊下面網址：
http://hovertree.com/texiao/html5/1.htm
一、開門見山
受美國肖像畫家Chuck Close的啟發，此腳本通過使用HTML5 canvas元素把圖像轉換成像素形式，這基本上是一個為canvas imageData功能的簡單演示。
此腳本現存於GitHub上，您可以在那裡下載到腳本和示例。在GitHub上查看像素化資源
二、選項
此方法接受一個對象數組，每個對象都擁有一組選項。
resolution : 渲染像素間的像素距離，必須的。
shape : 像素的形狀。 接受的選項有：square, circle, 以及diamond。可選，默認是square。
size : 渲染像素的像素大小值，可選，默認值是resolution。
offset : 偏移像素。可選，默認是0。可以是一個單獨的值15實現對角線偏移，或者是個數組或X/Y關鍵字的對象實現偏移：
[ 15, 5 ] 或 { x: 15, y: 5 }。
alpha : 小數值，指渲染的透明度。 可選，默認是1。
三、代碼示例
要想讓圖片像素化，首先調用如下腳本：
<script type="text/javascript" src="http://hovertree.com/texiao/html5/1/js/close-pixelate.js"></script>
然後調用方法closePixelate，更具體的是：
圖片dom.closePixelate(選項參數)
此腳本可以應用於各類圖片。根據HTML5規范，浏覽器禁止任何外部托管圖片上使用getImageData ()，但是，多虧了John Schulz的巨大貢獻，通過使用Max Novakovic的getImageData API，進一步像素化具有內置的方法來解決這個安全特征。
<img id="pixelExample2" src="pixel-example.jpg" width="300" height="426" />
在你的腳本中使用closePixelate方法與圖片上，你可以通過一組數組選項控制圖片輸出。如下示例代碼：
document.getElementById('pixelExample2').closePixelate( [
{ resolution: 24 }
] );
html代碼如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基於HTML5 Canvas實現的圖片馬賽克模糊特效-何問起</title>
<link rel="stylesheet" type="text/css" href="1/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="1/css/default.css">
<style type="text/css">
.thumb
{
margin-left: 5em;
}
.thumb img
{
max-width: 400px;
}
</style>
</head>
<body>
<div style="width:760px;margin:0px auto">
<h2>基於HTML5 Canvas的圖片馬賽克模糊特效 何問起</h2>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/hvtart/bjae/160ced36cb3a6a86.htm">原文</a> <a href="http://hovertree.com/texiao/html5/1/tupianmohu.rar" target="_self">下載</a>
<a href="http://hovertree.com/texiao/">特效庫</a><br />
</div>
<div class="container">
<div class="content bgcolor-8">
<p class="center">
改變模糊度
<input type="range" min="4" max="100" value="6" id="range" />
<span id="output">6</span></p>
<div class="thumb">
<img src="1/img/1.jpg" id="dolly1" />
<img src="1/img/2.jpg" id="dolly2" />
<img src="1/img/3.jpg" id="dolly3" />
</div>
</div>
</div>
<script src="http://hovertree.com/texiao/html5/1/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: 8}]
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>
</body>
</html>