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

效果请点击下面网址&＃xff1a; http://hovertree.com/texiao/html5/1.htm

一、开门见山

受美国肖像画家Chuck Close的启发&＃xff0c;此脚本通过使用HTML5 canvas元素把图像转换成像素形式&＃xff0c;这基本上是一个为canvas imageData功能的简单演示。

此脚本现存于GitHub上&＃xff0c;您可以在那里下载到脚本和示例。在GitHub上查看像素化资源

二、选项

此方法接受一个对象数组&＃xff0c;每个对象都拥有一组选项。

resolution : 渲染像素间的像素距离&＃xff0c;必须的。

shape : 像素的形状。 接受的选项有&＃xff1a;square, circle, 以及diamond。可选&＃xff0c;默认是square。

size : 渲染像素的像素大小值&＃xff0c;可选&＃xff0c;默认值是resolution。

offset : 偏移像素。可选&＃xff0c;默认是0。可以是一个单独的值15实现对角线偏移&＃xff0c;或者是个数组或X/Y关键字的对象实现偏移&＃xff1a;

[ 15, 5 ] 或 { x: 15, y: 5 }。

alpha : 小数值&＃xff0c;指渲染的透明度。 可选&＃xff0c;默认是1。

三、代码示例

要想让图片像素化&＃xff0c;首先调用如下脚本&＃xff1a;

然后调用方法closePixelate&＃xff0c;更具体的是&＃xff1a;

图片dom.closePixelate(选项参数)

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

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

document.getElementById(&＃39;pixelExample2&＃39;).closePixelate( [

{ resolution: 24 }

] );

html代码如下&＃xff1a;

.thumb{margin-left:5em;

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

}

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

首页 原文 下载

特效库