效果请点击下面网址： 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. XE1：使用SSMS创建Extended Events

    Extended Events 用于取代SQL trace,是SQL Server 追踪系统运行的神器,其创建过程十分简单. 一,创建Extended Events的Session step1,打开N ...

  2. Entity Framework Code First实体关联数据加载

    在项目过程中,两个实体数据之间在往往并非完全独立的,而是存在一定的关联关系,如一对一.一对多及多对多等关联.存在关联关系的实体,经常根据一个实体的实例来查询获取与之关联的另外实体的实例. Entity ...

  3. error: failed to push some refs to '......'解决方案

    由于是初学者,又因为最近项目需要,只好边学边用吧. 在使用  “git push origin master” 时出现了以下问题 网上搜到的解决方案,可用: 先输入: git stash(用于暂存当前 ...

  4. 【原创】开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 统计Go, Go, Go

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢!   结束了概率论,我们数据之旅的下一站是统计.这一篇,是统计的一个小介绍.   统 ...

  6. MyEclipse 2014跟2015破解

    最近一直在弄后台开发,之前用idea感觉用的很不习惯,于是就换了myeclipse,两年多没有用myeclipse了,版本都很高了,记得我们之前用myeclipse8.5版本的时候,注册码什么的直接运 ...

  7. ELF静态链接

    一直对ELF目标文件是怎样链接成可执行文件感到比较的疑惑,ELF文件里面的重定位段是怎样解决符号引用问题的?前几天偶然看了<深入理解计算机系统>里面讲了这个问题,看了之后对里面的实现机制终 ...

  8. 如何用Dummy实例执行数据库的还原和恢复

    今天实验了一下,如何在所有文件,包括数据文件,在线日志文件,控制文件都丢失的情况下,利用RMAN备份恢复和还原数据库.该实验的重点是用到了Dummy实例. 具体步骤如下: 备份数据库 [oracle@ ...

  9. java之文件基本操作

    java之文件基本操作 1 使用 BufferedReader 在控制台读取字符 public static void readChar() throws IOException{ char c; I ...

  10. 行程编码（atoi函数）

    #include<iostream> #include<string> #include<vector> using namespace std; void jie ...