color to B/W javascript affect_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-16 02:14 出处：网络

Is there any known/simple/open-开发者_StackOverflow社区source library that provide a javascript function that will switch colored picture that is displayed in an html page into a black and white

That can be used in all the most used browsers (IE, FireFox, Chrome)?

I mean something like:

<html>
...
<img id="myPic" src="pic.jpg">
...
<script type="text/javascript">
function onEvent(){
  var pic = document.getElementById("myPic");
  magicFunctionToBlackAndWhite(pic);
}
</script>
</html>

looking for that magicFunctionToBlackAndWhite()

There's no one solution that works across all browsers, but you can combine different solutions:

For IE, use the following CSS: filter: Gray

A lot of other browsers supports canvas, so you should be able to use this javascript code for that.

Of course it should't be too much of a hassle to make an image b/w in a serverside language such as .net, so you could always have a javascript that in principle does something like the following:

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
    imgs[i].src = 'convertimage.aspx?img=' + imgs[i].src;
}

...and then have all of the magic happening on the server.

That might be somehow possible by using the <canvas> element, but I would recommend you to do the black and white versions yourself, either manually or through some sort of script. Trust me – it'll save you a lot of trouble.