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

下载 :http://hovertree.com/texiao/html5/1/tupianmohu.rar

转自：http://hovertree.com/hvtart/bjae/160ced36cb3a6a86.htm

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

基于HTML5 Canvas实现的图片马赛克模糊特效的更多相关文章

  1. 基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...

  2. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  3. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  4. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  5. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  6. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  7. 基于html5 canvas和js实现的水果忍者网页版

    今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...

  8. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  9. 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...

随机推荐

  1. Join 和 apply 用法

    TSQL中的join语句共有五种类型,left join,right join,inner join,full join,cross join 为了描述方便,解释一个名词"保留表" ...

  2. LINQ系列：LINQ to XML查询

    1. 读取XML文件 XDocument和XElement类都提供了导入XML文件的Load()方法,可以读取XML文件的内容,并转换为XDocument或XElement类的实例. 示例XML文件: ...

  3. .NET平台开源项目速览(12)哈希算法集合类库HashLib

    .NET的System.Security.Cryptography命名空间本身是提供加密服务,散列函数,对称与非对称加密算法等功能.实际上,大部分情况下已经满足了需求,而且.NET实现的都是目前国际上 ...

  4. 分析MariaDB初始化脚本mysql_install_db

    在初始化MySQL的过程中经常会碰到各种问题,如 FATAL ERROR: Could not find ./bin/my_print_defaults ERROR: Can't create/wri ...

  5. 利用Shell脚本将MySQL表中的数据转化为json格式

    脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...

  6. php创建新用户注册界面布局实例

    php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...

  7. ORA-00257 archiver error 处理思路

    1.首先查下oerr给出的简要说明 2.查询V$RECOVERY_AREA_USAGE信息 3.根据实际空间剩余情况先适当增加归档目录的大小,保证先恢复业务 4.查看备份是否存在问题 1.首先查下oe ...

  8. 1Z0-053 争议题目解析686

    1Z0-053 争议题目解析686 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 686.You execute the following FLASHBACK TABLE com ...

  9. spring boot 添加拦截器

    构建一个spring boot项目. 添加拦截器需要添加一个configuration @Configuration @ComponentScan(basePackageClasses = Appli ...

  10. 谈谈JAVA工程狮面试中经常遇到的面试题目------什么是MVC设计模式

    作为一名java工程狮,大家肯定经历过很多面试,但每次几乎都会被问到什么是MVC设计模式,你是怎么理解MVC的类似这样的一系列关于MVC的问题. [出现频率] [关键考点] MVC的含义 MVC的结构 ...