效果请点击下面网址： 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. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  2. String Aop 动态代理例子

    动态代理原理:spring AOP采用动态代理来实现 (1)定义一个接口Boy package aop001; public interface Boy { public void beat(Stri ...

  3. iOS-App发布证书的申请与使用

    i开发环境:xcode5.1.1 iphonesdk:7.1 开发机器:iMac 真机部署测试:apple个人开发者ID 向导: 必备IDP证书和distribution证书(第一个证书是真机部署测试 ...

  4. Mysql5.7.13主从同步（复制）配置

    主从同步是分布式mysql数据库相当重要的配置,现在我在虚拟机上完成主从配置,系统是CenterOS6.5,mysql版本是5.7.13 主服务器的ip是192.168.19.139 副服务器的ip是 ...

  5. MVC4做网站后台:模块管理1、修改模块信息

    网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管 ...

  6. ASP.NET Core中的依赖注入（5）: ServiceProvider实现揭秘 【总体设计 】

    本系列前面的文章我们主要以编程的角度对ASP.NET Core的依赖注入系统进行了详细的介绍,如果读者朋友们对这些内容具有深刻的理解,我相信你们已经可以正确是使用这些与依赖注入相关的API了.如果你还 ...

  7. Linux笔记之——Linux关机命令详解(转)

    原文连接:http://www.jb51.net/os/RedHat/1334.html 在linux下一些常用的关机/重启命令有shutdown.halt.reboot.及init,它们都可以达到重 ...

  8. Hibernate学习之——Hibernate环境搭建

    之前在写关于安卓闹钟的教程,写了一半就没后一半了,其实自己也没做好,在校外实习,校内毕业实习又有任务,只能先放放了,等毕业实习结束之后,在继续安卓闹钟开发之旅,相信这个时间不会很久的.现在毕业实习用到 ...

  9. 安装最新版本的PHPUnit后，不能使用

    我使用的是widows系统.本来3.7.8版本的Phpunit用的是非常顺畅的,最近重新安装phpunit,安装了最小版本,然后在使用的时候就会报很多各种错误.无奈之下只能降版本到3.7.8 首先要卸 ...

  10. Oracle数据块损坏篇之10231内部事件

    实验:某个分区数据块损坏,不完全恢复此分区表数据 背景:数据库没有有效备份,某个分区中有数据块损坏. 要求:最大限度恢复此分区数据. 环境:RHEL 6.4 + Oracle 11.2.0.4 1. ...