Using javascript to print images

I would like to know if it's possible to use javascript to open a popup window containing an image, and at the same time have the print dialog show. Once someone clicks on print, the popup closes.

Is this easily attainable?


popup =;
popup.focus(); //required for IE

Another great solution!! All credit goes to Codescratcher


    function ImagetoPrint(source)
        return "<html><head><scri"+"pt>function step1(){\n" +
                "setTimeout('step2()', 10);}\n" +
                "function step2(){window.print();window.close()}\n" +
                "</scri" + "pt></head><body onload='step1()'>\n" +
                "<img src='" + source + "' /></body></html>";

    function PrintImage(source)
        var Pagelink = "about:blank";
        var pwa =, "_new");;


<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

See the full example here.


Use this in the head block

<script type="text/javascript">
function printImg() {
  pwin ="mainImg").src,"_blank");
  pwin.onload = function () {window.print();}

use this in the body block

<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image"  onclick="printImg()" />

This code will open YOUR_IMAGE_URL in a popup window, show print dialog and close popup window after print.

var popup;

function closePrint () {
    if ( popup ) {

popup = YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE

MDN Reference code


A cross browser solution printImage(document.getElementById('buzzBarcode').src)

 * Prints an image by temporarily opening a popup
 * @param {string} src - image source to load
 * @returns {void}
function printImage(src) {
    var win ='about:blank', "_new");;
        '   <head>',
        '   </head>',
        '   <body onload="window.print()" onafterprint="window.close()">',
        '       <img src="' + src + '"/>',
        '   </body>',
img {
  display: block;
  margin: 10px auto;

button {
  font-family: tahoma;
  font-size: 12px;
  padding: 6px;
  display: block;
  margin: 0 auto;
<img id="buzzBarcode" src=" infinity and beyond" width="150" height="150" />


Yea, just put the image on the screen, and then call window.print(); in javascript and it should popup.

(This is how Google Maps/Google Calendar do printing)


This works in Chrome:

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    setTimeout(function() {
                    }, 1);

I just spent 45 minutes on this "SIMPLE" problem, trying to get it the way I wanted it to operate.

I had an image inside an img tag, dynamically generated by a jQuery Barcode plugin that I had to print. I wanted it to print in another window and afterwards close the window. This was all supposed to happen after the user clicked a button inside a jQuery Grid plugin, inside a jQuery-UI dialog along with jQuery-UI dialog extender applied to it.

I adjusted everyone answers till I finally came up with this, maybe it can help someone.

w ="UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);

The setTimeout is not just for shits and giggles, it's the only way I found Firefox 42 would hit those functions. It would just simply skip the .close() functions until I added a breakpoint to it, then it worked perfectly. So I'm assuming it created those window instances before it could apply the onbeforeload event function and onafterprint event functions, or something.


I wrote a coffee script function that does that (but without opening a new window):

@print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)

$img.on 'load', ->

Or if you prefer in javascript:

this.print_img = function(url) {
  var $children, $img;
  $children = $('body').children().hide();
  $img = $('<img>', {
    src: url

  $img.on('load', function() {

This function makes sure that the elements on the body are hidden and not redrawn into the DOM. It also makes sure that the image is loaded before calling print (if the image is too large and the internet connection is slow, it may take a while to load the img, if you call print too soon, it will print an empty page)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.