效果请点击下面网址： 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. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  2. OPEN CASCADE Gauss Least Square

    OPEN CASCADE Gauss Least Square eryar@163.com Abstract. The least square can be used to solve a set ...

  3. 2012-09-10 23:30 如何解决HtmlAgilityPack得到的InnerText中有残留的script、样式的问题

    那么如何解决HtmlAgilityPack得到的InnerText中有残留的script.样式的问题呢,在google上搜索“HtmlAgilityPack script innerText”找到了s ...

  4. JavaSE高级之集合类

    ​下面的内容是对java中的集合类进行的总结,过段时间会分享java的网路编程,多线程等内容,欢迎批评指正. 1．Java中的集合是用来存放对象的,即集合是对象的集合,对象是集合的元素,java AP ...

  5. 如何将MySQL help contents的内容有层次的输出

    经常会遇到这种情况,在一个不能上网的环境通过MySQL客户端登录数据库,想执行一个操作,却忘了操作的具体语法,各种不方便. 其实,MySQL数据库内置了帮助文档,通过help contents即可查看 ...

  6. OO中，先有对象还是先有类？

    就是问,在面向对象思想里,先有对象还是先有类,乍一看和先有鸡蛋还是先有鸡是一类问题,其实不然!这个问题,在lz考研复试的时候被面试官问过,一模一样,如今又在一个笔试题里看到了类似的题目,眨一下,有人会 ...

  7. Android中后台的劳动者“服务”

    前言 作为四大组件之一的Service,想必不少开发者都是了解的,那具体熟悉吗?是不是对Service中的每个知识点是否了解,它与Activity的关系又是什么样的,我们所理解的后台服务跟Servic ...

  8. CSS浮动文摘

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程.        写在前面的话:        由于CSS内容比较多,没有精力从头到尾讲一遍,只能有 ...

  9. java删除文件夹

    想删除本地一个项目目录,结果windows说路径太长,不能删除.于是试了试java删除.一切ok.以后一定要抓紧时间学python. /** * Created by rmiao on 4/21/20 ...

  10. JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

    前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限.  即使在页面 ...