HTML5实践-图片设置成灰度图_html5教程技巧

时间：2020-11-27 来源：乌哈旅游

以前，在web上要显示灰度图片的话，只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程，而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo，来展示如何实现这个功能。

目的
这个demo将会向你展示用html5和jquery，如何实现鼠标在图片上移动移出时，灰度图像和原图之间的切换。在html5出现之前，要实现这个功能就需要准备两个图片，一个灰度图片，一个原图。但是现在借助于html5可以实现的更快更容易，因为灰度图片是直接在原图上生成的。我希望这段js代码对你在创建文件或者图片陈列功能的时候有帮助作用。

效果图

jquery 代码
下面的jquery代码将会寻找目标图片，并生成一个灰度的版本。当你鼠标移动到图片上时，灰度图片会变成原色。

代码如下: