Results 1 to 3 of 3

Thread: How to invert white on black image to black on white?

  1. #1
    Join Date
    Aug 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to invert white on black image to black on white?

    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.

    Click image for larger version. 

Name:	t1.png 
Views:	75 
Size:	15.0 KB 
ID:	5931

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    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>
    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">
    <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>
    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.
    Last edited by jscheuer1; 08-24-2016 at 06:10 AM. Reason: minor code improvement - later, add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked great. Thanks a lot for the help.

Similar Threads

  1. Ultimate Fade-in slideshow background colour black to white
    By steve74 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-26-2010, 04:33 PM
  2. Is it possible to replace the black image the slide show starts with?
    By hansemans in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-01-2010, 12:36 PM
  3. Replies: 1
    Last Post: 09-26-2009, 02:11 AM
  4. Table Hover white in image overlapping
    By torrent in forum JavaScript
    Replies: 0
    Last Post: 12-07-2007, 11:31 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •