用HTML5创建超酷图像灰度渐变效果
- Allen - 译言-电脑/网络/数码科技来源HTML5 Grayscale Image Hover. 曾几何时，网站上显示的灰度图像必须手动进行转换. 现在使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件. 我下面有一个示例，展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色. 贡献者：感谢达西·克拉克（我在Themify的合伙人）贡献jQuery和Javascript代码.
用HTML5创建超酷图像灰度渐变效果
标签：
html5
图像
灰度
| 发表时间：2011-02-25 22:40 | 作者：hfahe Allen
出处：http://www.yeeyan.org
原作者：
来源HTML5 Grayscale Image Hover
译者hfahe
曾几何时，网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。我下面有一个示例，展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者：感谢达西·克拉克（我在Themify的合伙人）贡献jQuery和Javascript代码。
示例：HTML5灰度渐变
这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。
jQuery代码
下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上，代码将会把灰度图像渐变为彩色的。
如何使用
在你的站点上使用这个效果：
· 1、引用jQuery.js
· 2、粘贴以上的代码
· 3、设置目标图像（例如.post-img, img,.gallery img等等）
· 4、你可以更改动画的速度（例如1000=1秒）
兼容性
可以工作在任何支持HTML5和Javascript的浏览器上，例如Chrome、Safari和Firefox。如果浏览器不支持HTML5，这个效果将会退回到原始的彩色图片。注意：如果本地文件在Firefox和Chrome上不工作，你必须要把HTML代码放到一个Web服务器上。
鸣谢
Javascript和HTML5灰度渐变代码来自于达西·克拉克。
转载请标明出处：蒋宇捷(hfahe) http://blog.csdn.net/hfahe
相关文章：
相关 [html5 图像 灰度] 推荐：
html5 canvas 图像处理
- - HTML5研究小组前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下. 与matlab处理图像类似的是，这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置.
HTML5 Canvas(画布)教程 – 图像处理
- - Web前端 - ITeye博客Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前，人们要想实现动态的网页应用，只能借助于第三方的 插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.
玩玩图形图像——第一篇：图片灰度化
- - 博客园_首页 去年买了本数字图像处理算法，一直都没有看，前几个星期都一直忙着工作上的活，趁这阶段悠闲点，玩一玩图片处理，这玩意. 以前我们在做Web上的用户注册时，通常都会做一个验证码，大家都知道用来防止暴力注册的，当然提到验证码大家都知道C#里. 面有一个Bitmap类专门用来处理图片的，好吧，这一篇我们从最简单的“图片灰度化”说起.
腾讯推出HTML5的开源专业级图像处理引擎
- - 互联网的那点事腾讯Web前端 AlloyTeam 近日推出了最新开源项目：一个基于HTML5技术的专业级图像处理引擎—— AlloyImage(简称AI)，以及一个在线Web图像处理平台—— AlloyPhoto(简称AP). 这预示着腾讯的Web前端团队将在底层基础技术层面做深入研究，并将更多的为业界提供基础技术服务，同时也将与 HTML5梦工场一起推动HTML5技术在业界的广泛深入的应用.
腾讯AlloyTeam再次发力：开源HTML5图像处理引擎AlloyImage
- - InfoQ cn近日，AlloyTeam的 腾讯Web前端Alloy团队Blog再次引起了业界的广泛关注，原因就是该团队近日推出了最新的开源项目：一个基于HTML5技术的专业级图像处理引擎——AlloyImage(简称AI)，以及一个在线Web图像处理平台——AlloyPhoto(简称AP). 这预示着腾讯的Web前端团队将在底层基础技术层面做深入研究，并将更多的为业界提供基础技术服务.
HTML5 logo 发布
- Greyby - 酷壳 - CoolShell.cn2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.
html5 canvas入门
- - Marshal's Blog可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.
HTML5新特性
- - CSDN博客推荐文章 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.
【转载】HTML5 Messaging
- - HTML5研究小组HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.