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

    一.location匹配 1.分类:(1)正则location:~,~*(2)普通location:=,^~,@,无2.匹配规则:(1) =    精确匹配.如果找到,停止搜索(2) ^~    普通 ...

  2. 利用免费cdn加速webpack单页应用

    回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了:   1 2 3 4 5 6 MacBook-Pro:output ba ...

  3. Entity Framework Code First执行SQL语句、视图及存储过程

    1.Entity Framework Code First查询视图 Entity Framework Code First目前还没有特别针对View操作的方法,但对于可更新的视图,可以采用与Table ...

  4. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  5. Android 内存管理 &Memory Leak & OOM 分析

    转载博客:http://blog.csdn.net/vshuang/article/details/39647167 1.Android 进程管理&内存 Android主要应用在嵌入式设备当中 ...

  6. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  7. 相克军_Oracle体系_随堂笔记007-PGA

    实际工作中,Oracle中有两个很重要:Server Process 和 PGA.   PGA内存作用和构成   1.PGA作用 2.PGA构成 1)private SQL area   2)Sess ...

  8. Vertica的date与timestamp数据类型，to_date()与to_timestamp()函数区别

    实验环境:3节点,RHEL6.4 + Vertica 7.0.1 实验目的:了解Vertica数据库的date与timestamp数据类型,to_date()与to_timestamp()函数区别   ...

  9. Node.js、Express框架获取客户端IP地址

    Node.js //传入请求HttpRequest function getClientIp(req) { return req.headers['x-forwarded-for'] || req.c ...

  10. 实现一个纵向排列的 ListBox ，并具有操作按钮

    需要实现的效果如下: 要想把 ListBox 的内容纵向显示很简单,只需把 ListBox 的内容控件为 WrapPanel 就可以了: <ListBox.ItemsPanel> < ...