`

HTML5图片黑白转换效果

 
阅读更多

曾几何时,网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。我下面有一个示例,展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者:感谢达西·克拉克(我在Themify的合伙人)贡献jQuery和Javascript代码。

效果演示:http://webdesignerwall.com/demo/html5-grayscale/ 

目的

这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效,因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。

下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上,代码将会把灰度图像渐变为彩色的。

 

  1. <mce:script src="jquery.min.js" mce_src="jquery.min.js" type="text/javascript"></mce:script>  
  2. <mce:script type="text/javascript"><!--  
  3.    
  4.         // On window load. This waits until images have loaded which is essential  
  5.         $(window).load(function(){  
  6.    
  7.                // Fade in images so there isn't a color "pop" document load and then on window load  
  8.                $(".item img").fadeIn(500);  
  9.    
  10.                // clone image  
  11.                $('.item img').each(function(){  
  12.                        var el = $(this);  
  13.                        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style="display: inline-block" mce_style="display: inline-block">").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){  
  14.                                var el = $(this);  
  15.                                el.parent().css({"width":this.width,"height":this.height});  
  16.                                el.dequeue();  
  17.                        });  
  18.                        this.src = grayscale(this.src);  
  19.                });  
  20.    
  21.                // Fade image  
  22.                $('.item img').mouseover(function(){  
  23.                        $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);  
  24.                })  
  25.                $('.img_grayscale').mouseout(function(){  
  26.                        $(this).stop().animate({opacity:0}, 1000);  
  27.                });  
  28.         });  
  29.    
  30.         // Grayscale w canvas method  
  31.         function grayscale(src){  
  32.                var canvas = document.createElement('canvas');  
  33.                var ctx = canvas.getContext('2d');  
  34.                var imgObj = new Image();  
  35.                imgObj.src = src;  
  36.                canvas.width = imgObj.width;  
  37.                canvas.height = imgObj.height;  
  38.                ctx.drawImage(imgObj, 0, 0);  
  39.                var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);  
  40.                for(var y = 0; y < imgPixels.height; y++){  
  41.                        for(var x = 0; x < imgPixels.width; x++){  
  42.                                var i = (y * 4) * imgPixels.width + x * 4;  
  43.                                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;  
  44.                                imgPixels.data[i] = avg;  
  45.                                imgPixels.data[i + 1] = avg;  
  46.                                imgPixels.data[i + 2] = avg;  
  47.                        }  
  48.                }  
  49.                ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
  50.                return canvas.toDataURL();  
  51.     }  
  52.    
  53. // --></mce:script> 

 如何使用

    * 引用jQuery.js
    * 粘贴以上的代码
    * 设置目标图像(例如.post-img, img, .gallery img等等)
    * 你可以更改动画的速度(例如1000=1秒)

兼容性

可以工作在任何支持HTML5和Javascript的浏览器上,例如Chrome、Safari和Firefox。如果浏览器不支持HTML5,这个效果将会退回到原始的彩色图片。注意:如果本地文件在Firefox和Chrome上不工作,你必须要把HTML代码放到一个Web服务器上。

 

 

文章来源:blog.csdn.net/hfahe

分享到:
评论

相关推荐

    jquery黑白效果,任意彩色图片都可以变黑白

    将彩色图片转换为黑白效果,实质上就是将RGB三个通道的颜色信息整合为一个单一的灰度值。 在jQuery中,我们可以通过操作DOM元素的CSS属性或使用像素级的图像处理方法来实现这一转换。一种简单的方法是使用CSS滤镜...

    网站变黑白效果方法大集锦

    这种方法确保了网站的所有内容都被转换为黑白效果,但对于不支持此属性的浏览器则无效。 #### 应用于不同类型的网站元素 除了全局应用黑白效果之外,还可以针对特定的HTML元素进行设置,如`div`、`table`等。 ###...

    jQuery彩色图片转黑白图片网页特效代码

    "jQuery彩色图片转黑白图片网页特效代码"是一个实用的工具,它利用JavaScript库jQuery以及可能涉及的CSS3和HTML5技术,实现了一种跨浏览器的图片色彩转换效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化...

    CSS 鼠标移动图片由黑白变成彩色

    本文将深入探讨如何使用CSS实现一个有趣的视觉效果:当鼠标悬停在图片上时,图片由黑白变为彩色。这个效果可以为用户带来更丰富的交互体验,增加网页的吸引力。 首先,我们需要一个HTML结构来承载我们的图片。以下...

    Vibrant.js相册图片颜色提取变成黑白图片效果

    "Vibrant.js相册图片颜色提取变成黑白图片效果"这个标题和描述提到了一个使用JavaScript库Vibrant.js来实现的功能,它允许我们从相册图片中提取主要颜色,并将这些彩色图片转换为具有艺术感的黑白效果。下面我们将...

    HTML5+CSS仿Instagram应用图片滤镜效果

    在CSS中,我们可以定义滤镜函数,如`grayscale(1)`来将图片转换为黑白,`brightness(0.8)`降低图片亮度,或者`sepia(1)`应用复古的褐色调。通过调整这些函数的参数,我们可以创建出与Instagram类似的各种滤镜效果。 ...

    跨浏览器彩色图片转黑白图片jquery插件

    4. 可选参数:根据需求,你还可以设置一些可选参数,比如切换图片颜色和黑白效果,或者在某个事件触发时进行转换。 总的来说,jquery.gray.js是jQuery生态系统中的一个强大工具,它通过简单易用的API,让开发者能够...

    九宫格图片jquery相册代码,鼠标点击后,会有从黑白过度到彩色的效果

    2. **黑白效果**:预先处理图片为黑白版本,可以使用图像编辑软件手动处理,或者使用JavaScript库(如html2canvas)动态转换。 3. **过渡效果**:在点击事件触发时,通过修改CSS的`filter`属性,从黑白滤镜过渡到无...

    ImageHtml (图像转换ASCII)

    ImageHTML是一款专用于将图像转换成ASCII字符的艺术形式的工具,它可以将图片转换为HTML格式,使得在网页上也可以展示这种独特的艺术效果。这个程序的独特之处在于它支持三种不同的图像处理模式,包括真彩色、灰度和...

    css 图片变黑白效果 使用CSS将图片转换成黑白的

    标题中的“css 图片变黑白效果 使用CSS将图片转换成黑白的”指的是使用CSS3的滤镜功能来改变图片的颜色模式,将其转换为黑白效果。描述中提到的“CSS3 greyscale 滤镜实现”是指CSS3引入的一种新的滤镜效果,允许...

    jquery图片左右全屏流畅滑动效果(支持图片变黑白

    5. **优化与兼容性**:考虑到浏览器的兼容性,确保在不支持CSS滤镜的老版本浏览器中也能正常工作,可以采用JavaScript进行图片像素级别的处理,将图片转换为黑白。同时,滑动效果也需要优化,确保在低性能设备上依然...

    css-图片彩色到黑白的扫描效果实现

    总之,CSS提供了一种灵活的方式,让我们能够轻松地实现图片从彩色到黑白的扫描效果。通过巧妙地使用`filter`属性和CSS动画,我们可以创造出引人入胜的交互式网页元素,提升用户体验。结合HTML和JavaScript,你可以在...

    网站模板-干净整洁黑白风格HTML5模板.zip

    此外,CSS3的过渡、动画和3D转换等功能,让网页元素的动态效果变得更加丰富和流畅。 该压缩包中的HTML5模板可能包含了以下组成部分: 1. **HTML 文件**:这是实际的网页内容,使用HTML5语法编写,定义了网页的结构...

    黑白宽频_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    该压缩包文件“黑白宽频_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip”包含了用于构建响应式、跨平台的HTML5网站的资源,主要聚焦于CSS、JavaScript和UI组件的设计。下面我们将深入...

    黑白边框样式HTML模板是一款简洁黑白线条搭配的HTML网站模板下载 .rar

    此模板中的"黑白边框"效果主要通过CSS(Cascading Style Sheets)实现。CSS用于控制网页的样式和布局,它可以定义颜色、字体、尺寸、间距等视觉元素,以及布局模式如网格系统、响应式设计等。CSS3引入了更多高级特性...

    HTML5 canvas实现的图片三角形灰度滤镜效果源码.zip

    在这个“HTML5 canvas实现的图片三角形灰度滤镜效果源码”压缩包中,我们主要会涉及到以下几个核心知识点: 1. **HTML5 Canvas API**:Canvas是一个基于矢量图形的画布,允许开发者通过JavaScript动态地绘制图形。...

    jQuery彩色图片转黑白图片代码.zip

    它可能包括如何在HTML中插入图片,如何应用jQuery选择器和事件处理,以及如何在用户交互(如鼠标悬停)时触发图片的黑白转换。 总结来说,这个项目提供了通过jQuery实现彩色图片转黑白图片的多种技术方案,确保了在...

    JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    在本文中,我们探讨了如何使用JavaScript与Canvas API将彩色图片转换成黑白图片的方法。这一技术利用了HTML5中Canvas元素的功能来在网页上绘制和修改图片内容。以下是详细知识点的分析: 1. Canvas元素和上下文:在...

    jquery实现鼠标滑过图片黑白显示的特效

    要实现鼠标滑过图片时图片变为黑白,我们可以利用CSS3的滤镜(filter)属性,特别是`grayscale()`函数,该函数可以将彩色图像转换为灰度图像。但在JavaScript环境中,我们不能直接改变CSS的滤镜,因此需要用到jQuery...

Global site tag (gtag.js) - Google Analytics