canvas 实现图片局部模糊_基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址： 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。

三、代码示例

要想让图片像素化，首先调用如下脚本：

然后调用方法closePixelate，更具体的是：

图片dom.closePixelate(选项参数)

此脚本可以应用于各类图片。根据HTML5规范，浏览器禁止任何外部托管图片上使用getImageData ()，但是，多亏了John Schulz的巨大贡献，通过使用Max Novakovic的getImageData API，进一步像素化具有内置的方法来解决这个安全特征。

在你的脚本中使用closePixelate方法与图片上，你可以通过一组数组选项控制图片输出。如下示例代码：

document.getElementById('pixelExample2').closePixelate( [

{ resolution: 24 }

] );

html代码如下：

基于HTML5 Canvas实现的图片马赛克模糊特效-何问起

.thumb{margin-left:5em;

}.thumb img{max-width:400px;

}

基于HTML5 Canvas的图片马赛克模糊特效 何问起

首页 原文 下载

特效库