Solved

Print a web page that uses IE colored light filters

Posted on 2004-10-24
192 Views
Last Modified: 2010-04-06
I have a website that uses IE light filters similar to what is shown at http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_filter_light

While it all displays perfectly on the screen when I print the page all images that have a filter effect are displayed as black.

The only way I have to print the page as shown on the screen is to printscreen, and paste into image editing software, removing window borders, then printing.  This is a pain for me, and not acceptable for the average web user.

Does anyone know any way in which images with IE filters can be printed in a webpage, with the output displaying as it is on screen.

Thanks

Jeremy
0
Question by:JeremyKells
    7 Comments
     
    LVL 3

    Expert Comment

    by:gnudiff

    I am fairly certain this is an actual limitation of the IE, and you would have to do server-side image processing instead of client-side, for printing to work properly.
    0
     
    LVL 18

    Accepted Solution

    by:
    Yes, IE's filters are just a code-bloat feature-cram get it in there then it's one more bit for us winning the browser wars thing.
    Soon as Netscape died, IE stopped being worked on.  And as I said this feature was just added for "Ooo, aaa" factor.  It's not really that great for doing a lot with.

    If you want to be able to print it, too, do your filters server side.  Or, just filter it in an image editor then save the image that way.
    0
     

    Author Comment

    by:JeremyKells
    That fits with what I suspected - that it was a IE limitation

    As I have come up with a useful page that uses the filters heavily (to see it goto http://www.spc.int/demog/Test/thematicmaps.html) I will ask one more thing

    Is it possible as a workaround to do what I am doing by hand to print?  I know it is a long shot using javascript, but the steps would be

    1) printscreen, just copying the window contents to the clipboard

    2) print clipboard contents


    Any other suggestions are welcome as well

    Thanks

    Jeremy


     
    0
     
    LVL 3

    Expert Comment

    by:andYetAnotherLoginName
    suggestions? use javascript to remove filters before print.
    0
     
    LVL 3

    Expert Comment

    by:gnudiff
    By a long shot, the cleanest and probably fastest way would be to do the image processing server-side.

    The exact solution would depends on the server-side possibilities. If it is PHP, you can do something like:

    from  http://www..php.net/manual/en/ref.image.php
    "
    <?php

    header("Content-type: image/png");
    $string = $_GET['text'];
    $im    = imagecreatefrompng("images/button1.png");
    $orange = imagecolorallocate($im, 220, 210, 60);
    $px    = (imagesx($im) - 7.5 * strlen($string)) / 2;
    imagestring($im, 3, $px, 9, $string, $orange);
    imagepng($im);
    imagedestroy($im);

    ?>
    This example would be called from a page with a tag like: <img src="button.php?text=text">. The above button.php script then takes this "text" string and overlays it on top of a base image which in this case is "images/button1.png" and outputs the resulting image. This is a very convenient way to avoid having to draw new button images every time you want to change the text of a button. With this method they are dynamically generated.

    "
    In the above link you can also see what functionality is available -- if it fits what you need to do with the images.
    0
     

    Author Comment

    by:JeremyKells
    The reason I wish to use client side image processing rather than server side processing is to avoid the extra roundtrip to the server each time a user selects imputs that change the colors on the images.  This is because many of the users of this website are located in Pacific Island countries that have internet connections that are slow at best, so the less network bandwidth needed the better.

    So the PHP solution, while it looks interesting, is not what I want in this case.  Thanks for the link, I haven't used PHP before, but imay use it for other projects in the future.

    Removing the filters before printing removes much of the value of printing the page, so is also not the answer here.  It does stop them appearing black in the printout though.

    I think I will look at other client side options, starting with SVG and Flash.  Personally I like SVG but has the disadvangate of a large plugin download, a big disadvantage in with the target user group.  Flash also has the plugin requirement, but I think many PC now have this preinstalled, so may be a better option.

    Comments are welcome, but short of anyone coming up with anything that completely changes my mind, I will split the points between the above replies.

    Thanks
    Jeremy

    0
     
    LVL 3

    Assisted Solution

    by:gnudiff
    >> Removing the filters before printing removes much of the value of printing the page, so is also not the answer here.  It

    I agree. I would further assert that this is probably simply a bug in IE, however, waiting for it to be fixed could take indefinite time. Furthermore, MS may altogether decide to throw out the filtering functionality in the future.

    > I think I will look at other client side options, starting with SVG and Flash.  Personally I like SVG but has the disadvangate of a large plugin download, a big disadvantage in with the target user group.  Flash also has the plugin requirement, but I think many PC now have this preinstalled, so may be a better option.

    I have not had much experience with either, so in fact I am surprised that Flash/SVG would have the neccessary filtering capabilities for _bitmap_ manipulation -- I was under impression that they both were more oriented towards vector graphics.

    However, the obvious comment here is to check for their printing capabiities - whether Flash/SVG has some inbuilt printing possibilities, or whether IE prints Flash at all - it may well be the case it doesn't do that either, as Flash has been mostly used for movie-like dynamic stuff.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Course: From Zero to Hero with Nodejs & MongoDB

    Interested in Node.js, but don't know where to start or how to learn it properly? Confused about how the MEAN stack pieces of MongoDB, Expressjs, Angularjs, and Nodejs fit together? Or how it's even possible to run JavaScript outside of the browser?

    Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    875 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now