Printable View
I have a bunch of images constantly coming in to the website which are white writings on black background - I want to change it to black writings on white background. Would deeply appreciate if you can send me a link to a tutorial or a sample script. Thanks.
Attachment 5931
How do the images get to the website? If it's via some sort of server side language like - say, PHP, then that's how to deal with this. There's no current way I'm aware of to change an image via javascript in that manner, though there is a way using CSS 3, but IE doesn't use it. There used to be proprietary filters in IE for that, but they're no longer available in today's IE browsers, and both of these only change(d) how the image looks. Not the image itself. However, using server side language and an image plugin (if available, most PHP installations come with one) one can actually process the image and invert its colors and/or a great many other things, actually making a new image with the desired attributes.
If server side code isn't available, this will work for most modern browsers (not IE):
You can force IE to use its proprietary filter, but that will likely change other rendering aspects of the page in that browser, and the user can inadvertently, or on purpose override it, still it can often work out (additions highlighted):Code:<!DOCTYPE html>
<html>
<head>
<title>Image Invert Color - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
img.invert {
-webkit-filter: invert(1);
filter: invert(1);
}
</style>
</head>
<body>
<img class="invert" src="t1.png" alt="whatever" title="">
</body>
</html>
If PHP is available and has the requisite image resources, you can either convert on the fly for time of display only or convert at time of upload or any time thereafter and replace the original image with it's negative version or keep both versions. If you're interested in the code for any of that, I can give you links and examples, but the final implementation will be up to you and dependent upon what exactly is available to you on your host as regards PHP. If a workable PHP solution can be arranged, it will work for all browsers.Code:<!DOCTYPE html>
<html>
<head>
<title>Image Invert Color - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
img.invert {
-webkit-filter: invert(1);
filter: invert(1);
filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1);
}
</style>
</head>
<body>
<img class="invert" src="t1.png" alt="whatever" title="">
</body>
</html>
That worked great. Thanks a lot for the help.