基于HTML5 Canvas实现的图片马赛克模糊特效

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

时间: 2024-10-02 21:25:52

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

HTML5 Canvas实现的图片马赛克模糊特效

要想让图片像素化,首先调用如下脚本:<script type="text/javascript" src="http://hovertree.com/texiao/html5/1/js/close-pixelate.js"></script>然后调用方法closePixelate,更具体的是:图片dom.closePixelate(选项参数) 此脚本可以应用于各类图片.根据HTML5规范,浏览器禁止任何外部托管图片上使用getImageDat

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

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷. 在线预览   源码下载 HTML代码如下 <p class="center">Change pixel resolution <input type="r

基于HTML5 Canvas的饼状图表实现教程

昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表是饼状图,并且我们可以点击右侧的表格来选中激活当前的图表数据,具体效果可以看DEMO演示. 你也可以在这里查看在线演示 下面是实现的过程及源码,一起分享给大家. HTML代码: <div id="container"> <canvas id="chart&quo

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

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

分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="site-wrapper"> <section id="section-header" data-coloroverlap="dark"></section> <section id="second-phase&qu

基于HTML5 Canvas和jQuery 的画图工具的实现

简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品: 该应用是遵循所见即所得(WYSIWYG, What you see is what you get)原则设计的,它具有以下功能: 1. 可以绘制自由曲线.直线.矩形框和文字: 2. 可以根据需要定义线段和矩形框的颜色和宽度: 3. 你可以需要字体的大小.颜色.字体: 4. 支持undo.redo

推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空(山边小溪) - 博客园

推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空(山边小溪) - 博客园 推荐18个基于 HTML5 Canvas 开发的图表库

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

今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Raphael,效果很赞,赶紧来膜拜一下.效果图如下: 在线预览   源码下载 实现的代码. html代码: <canvas id="view" width="640" height=&q

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

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的形式展现,各个数据之间形成的区域用不同的颜色表示,具体可以看下面的DEMO演示. 你也可以在这里查看在线演示 下面我们来简单介绍一下实现这款HTML5图表的过程以及源代码. HTML代码: <canvas id="cvs" width="600" height=&