`
robote2009
  • 浏览: 10791 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
最近访客 更多访客>>
社区版块
存档分类
最新评论

将彩色图片转换为黑白

 
阅读更多
  1. 不同的浏览器将彩色图片显示为黑白图片的css,这里采用css filter
  • firefox
img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
img:hover{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
}

 

  •  IE
img{ 
   
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);    
    filter: grayscale(100%);	
    filter: gray;
}
img:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);    
    filter: grayscale(0);	
}
 
2.  根据不同的浏览器加载不同CSS

 

<script>
if(window.navigator.userAgent.indexOf("MSIE")>=1){
  //如果浏览器为IE
  setActiveStyleSheet("style_ie.css");
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1 ){
  //如果浏览器为Firefox
  alert("fire");
  setActiveStyleSheet("style_fire.css");
}
else{
  //如果浏览器为其它
  setActiveStyleSheet("style_ie.css");
}
   
 function setActiveStyleSheet(filename){ 
  document.write("<link href=\".\/cs\/"+filename+"\" type=\"text\/css\" rel=\"stylesheet\">");
}
</script>
 后记:
可以直接通过CSS实现,经过测试在firefox上是好使的,IE上不知道为什么,变不回彩色了。
	<style type="text/css">
	img{ 
   
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);    
    filter: grayscale(100%);	
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
	img:hover{
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		-o-filter: grayscale(0);    
		filter: grayscale(0);	
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' x=\'0\' y=\'0\' width=\'100%\' height=\'100%\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
	}
	</style>
 
分享到:
评论

相关推荐

    15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)

    15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成黑白图像?(Visual C++编程 源代码)15.如何将彩色图像转换成...

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

    在网页设计和开发中,视觉效果常常起到至关重要的作用,其中一种常见的视觉处理技术就是将彩色图片转换为黑白。"jQuery彩色图片转黑白图片网页特效代码"是一个实用的工具,它利用JavaScript库jQuery以及可能涉及的...

    彩色图片转黑白位图

    在图像处理领域,将彩色图片转换为黑白位图是一种常见的操作。这主要涉及到色彩空间转换、灰度化处理以及位图的理解。以下是对这个主题的详细讲解。 首先,我们需要了解彩色图片的基础。彩色图片通常使用RGB...

    使用HTML5 转换彩色图片为黑白色.doc

    图片的灰度转换是将彩色图片转换为黑白色的过程。我们可以使用 canvas 元素和 FileReader 接口来实现图片的灰度转换。下面是一个基本的实现代码: `function file_droped(evt){ ... }` 在上面的代码中,我们定义...

    C# 把彩色图片转换成黑白图片

    在C#编程环境中,我们可以利用图像处理库如System.Drawing来实现彩色图片向黑白图片的转换。这个过程通常称为灰度化或二值化,即将图片的每个像素从RGB(红绿蓝)三色模型转换为单色调。下面,我们将详细讨论如何...

    Java彩色图片转换黑白(灰度图).rar

    在Java编程语言中,图像处理是一项常见的任务,其中包括将彩色图片转换为黑白或灰度图像。这个过程涉及到图像的颜色模型转换,通常从RGB模型转换到灰度模型。RGB模型是红绿蓝三种颜色的组合,而灰度模型则是单一色调...

    C#批量 彩色图片转黑白图片的源码 VS2010(可正常解压)

    总结来说,批量将彩色图片转换为黑白图片在C#中主要涉及颜色模型的转换和图像处理API的使用。在使用VS2010进行开发时,应关注文件路径的兼容性和选择合适的图像处理库以提高性能。同时,解压缩文件时要考虑跨平台的...

    Python处理彩色图片为黑白铅笔素描图源码.rar

    在Python编程语言中,图像处理是一项常见的任务,可以用于创建各种视觉效果,包括将彩色图片转换为黑白铅笔素描图。这个压缩包文件“Python处理彩色图片为黑白铅笔素描图源码”提供了实现这一功能的具体代码,让我们...

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

    接着,我们需要了解如何将彩色图片转换为黑白。一种常见的方法是利用CSS3的滤镜属性。例如,可以添加`filter: grayscale(100%)`来将图片变为全黑白色调。然而,CSS3滤镜在某些老版本的浏览器中可能不被支持,因此...

    将彩色bmp图像转换为黑白图像

    彩色bmp图像 转换 黑白bmp图像,包含24位深度彩色图像读取

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

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

    彩色图片转换成黑白图片(VB代码).rar

    标题中的“彩色图片转换成黑白图片(VB代码).rar”表明这是一个使用Visual Basic(VB)编程语言实现的项目,目标是将彩色图像转换为黑白图像。在计算机图形处理中,这种转换通常涉及到图像的灰度化过程。接下来,我们...

    用MATLAB把彩色图片变为黑白.docx

    在MATLAB中,将彩色图片转换为黑白图片的过程涉及到图像处理的基本操作,主要涉及的知识点包括图像读取、颜色空间转换以及图像显示。下面将详细解释这些内容。 首先,我们从`imread()`函数开始。这是一个用于读取...

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

    这是一款跨浏览器支持,使用多种技术手段来将彩色图片转换为黑白图片效果的jQuery彩色图片转黑白图片网页特效代码。 引入js文件 [removed][removed] [removed][removed]

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

    这是一款跨浏览器支持,使用多种技术手段来将彩色图片转换为黑白图片效果的jQuery彩色图片转黑白图片网页特效代码。 引入js文件 [removed][removed] [removed][removed]

    用MATLAB把彩色图片变为黑白.pdf

    本话题将围绕如何使用MATLAB将彩色图片转换为黑白图片这一主题进行深入探讨。 首先,我们需要理解基本的图像表示。在MATLAB中,图像可以被当作一个矩阵来处理。如果一个图像为彩色图像,也就是我们常说的RGB图像,...

    秋天一键图片批量黑白V1.01图片批量变为黑白图

    总的来说,“秋天一键图片批量黑白V1.01”是一个实用的图像处理工具,借助Qt库的强大功能,提供了一键批量将彩色图片转换为黑白图片的服务,满足了用户在各种场景下的图片处理需求。通过简单操作,用户可以轻松实现...

    javascript经典特效---jquery平滑交换真彩色的图片逐渐变为黑白图像的代码.rar

    当我们将彩色图片转换为黑白图像时,通常会通过灰度算法来实现。灰度算法是将每个像素的RGB值转换为一个单一的灰度值,该值由三个原色的加权平均决定。 在jQuery中,我们可以通过遍历图片的每个像素,然后逐个调整...

    jni开发demo:通过jni将一张彩色图片转换为黑白图片

    本示例"jni开发demo:通过jni将一张彩色图片转换为黑白图片"是一个典型的JNI应用,它演示了如何利用JNI技术处理图像数据,实现颜色转换功能。 首先,我们需要了解JNI的基本工作原理。JNI主要包括以下几个步骤: 1....

Global site tag (gtag.js) - Google Analytics