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

要想让图片像素化,首先调用如下脚本:
<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>

时间: 2024-10-28 10:58:14

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

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

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape

一款由html5 canvas实现五彩小圆圈背景特效

之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码: <canvas> </canvas> <div id="Circle"> <span>Harris Carney<span> </div> css代码: body { margin: 0; overflow: hi

HTML5 Canvas炫酷宇宙黑洞引力特效

black-hole.js是一款效果非常炫酷的模拟宇宙黑洞引力特效的js插件.该插件基于HTML5 canvas,使用WebGL. glfx.js和 numeric.js 共同制作完成.其效果是在鼠标滑过图片时鼠标区域形成黑洞效果,使它周围的空间坍缩. 注意:由于HTML5的安全限制,插件中的图片必须是同源的图片.在本地浏览器这个插件时,Chrome浏览器会看不到效果,你可以使用Firefox浏览器在本地查看这个demo. 效果演示:http://www.htmleaf.com/Demo/201

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理.在游戏中的资源大多数都是加载图片. 一.canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh

html5 canvas实现图片玻璃碎片特效

今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览   源码下载 实现代码: html代码: <img src="city_copy.jpg" id="src_img" class="hidden"> <div id="container" style="-webkit-perspective:

HTML5 canvas炫酷棱镜效果的幻灯片特效

这是一款效果非常炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效.这个特效在每一个幻灯片的前面放置一个图形,并将图形制作为三棱镜效果,它底下的幻灯片图片会被"折射"到棱镜上面,形成一种棱镜折射效果. 所有的现代浏览器都支持这个幻灯片特效,包括IE9. 效果演示:http://www.htmleaf.com/Demo/201504011607.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201504011606.html

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

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

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

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解 [js高手之路] html5 canvas系列教程 - arc