Printing a single image

Some time ago I got the question whether it was possible to provide a way to print a single image that was a part of the webpage. The rest of the contents of the page should not be printed, only the image. Of course a visitor can manually display the image in a separate window, or download it first, but there’s a more user friendly way, which I’ll explain in this article.

The way to go is using Javascript. There is a function print() for the window object that you’ll need to use, but as it says, this will print the entire window. For only the image to appear on the printer, it needs to be in a separate window. Of course you don’t want to bother your visitors with popup windows, so the solution here is to use an iframe. To make sure it doesn’t mess up your page, just place it somewhere outside the regular area that is displayed:

<iframe frameborder="0" marginwidth="0" 
    marginheight="0" id="printFrame" name="printFrame" 
    style="position:absolute;top:-900px;"></iframe>

Notice the id as well as the name attribute display the value "printFrame" for cross-browser compatibility.

Next, let’s display the actual image:

<img src="epcot.jpg" id="image1" 
    alt="Epcot at night, by Martijn Reemst" 
    width="300" height="400"/>

This image has a unique id "image1". We’ll need this later on.

Next, the necessary Javascript function. This is pretty straight forward, except for one small thing.

<script language="javascript">
    function printIt(imgToPrint) {
        document.getElementById("printFrame").width = 
            document.getElementById(imgToPrint).width + "px";
        document.getElementById("printFrame").height = 
            document.getElementById(imgToPrint).height + "px";

        frames["printFrame"].location.href = 
            document.getElementById(imgToPrint).src;
        frames["printFrame"].focus();
        setTimeout('frames["printFrame"].print()',10);
    }
</script>

First, the width and height of the iframe is set to the size of the image that we want to print. Next, the contents of the iframe is set display the image, and only the image. After that you would think that only the print() command would be necessary to finish it, but unfortunately Internet Explorer has a small issue here. First we need to set the focus to the iframe, and wait a little because Internet Explorer won’t print the iframe, or (worse) print the previous contents of the iframe. That’s why a call to “setTimeout” is done. The time the browser waits is only 10 millisecs, so you won’t really be able to notice it. The other argument contains the Javascript we actually want to call.

We’re almost there, we only need to call the Javascript method we defined above. This is the easiest part, and we’ll combine it with a nice caption:

Epcot at night - 
    <a href="javascript:printIt('image1')">Print this image</a>

That’s it! Try it below, and feel free to use it on your own site.

Epcot at night – Print this image