效果请点击下面网址： 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="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>
下载 :http://hovertree.com/texiao/html5/1/tupianmohu.rar