Print image with Javascript

Question

I want to print image with javascript. So I used this code to open image in new window and print:

win = window.open(img.src,"_blank");
win.onload = function() { win.print(); }

This works fine with the default image file:

<img id="image1" src="myimage.jpg">

But when i replace the default image with image data read from disk:

var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
reader.onload = function(event) {
   img.src = event.target.result;
};
reader.readAsDataURL(fileElem);

And then open new window & print - the image apears fine in the new window, but no print operation is done. How to make the win.print() to work?

t no print operation is done What does that mean? The print dialog does not appear? — epascarello
– epascarello, Commented Dec 16, 2013 at 14:12
Why use a new window? CSS Print Media, hide everything but an image when the print happens. — epascarello
– epascarello, Commented Dec 16, 2013 at 14:39
can you post more informaion about win value. where it is called like that.try to provide environment in jsfiddle! — BlackPOP
– BlackPOP, Commented Dec 16, 2013 at 14:41
epascarello thanks, If i want to print full sized big image it would be a problem with my website's layout. But it looks like a solution if I can't do it otherwise. — Joe
– Joe, Commented Dec 16, 2013 at 14:44

Sayris · Accepted Answer · 2013-12-16 16:52:26Z

OK!

I'v tried this on Chrome and it's work well :

<html>
    <head>
        <script language="javascript" type="text/javascript">
            function printImage() {
                var fileElem = document.getElementById("fileElem").files[0];
                var reader = new FileReader();
                reader.onload = function(event) {
                    var html  = "<html><head>" +
                        "</head>" +
                        "<body  style ='-webkit-print-color-adjust:exact;'>"+
                        "<img src=\"" + event.target.result + "\" onload=\"javascript:window.print();\"/>" +
                        "</body>";
                    var win = window.open("about:blank","_blank");
                    win.document.write(html);

                };
                reader.readAsDataURL(fileElem); 
            }
       </script>
   </head>
   <body>
       <input type="file" id="fileElem"/>
       <button onclick="printImage()">PRINT</button>
   </body>
</html>

Regards.

Matteo Alessani · Accepted Answer · 2016-02-20 13:52:38Z

0

I'm not sure because I don't know all of your code, but maybe this could work:

var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
reader.onload = function(event) {
   var win = window.open(event.target.result,"_blank");
   win.onload = function() { win.print(); }
};
reader.readAsDataURL(fileElem);

you don't need anymore "img" tag.

edited Feb 20, 2016 at 13:52

Matteo Alessani

10.5k4 gold badges42 silver badges57 bronze badges

answered Dec 16, 2013 at 14:17

Sayris

1,07810 silver badges10 bronze badges

1 Comment

Joe Over a year ago

Thanks, I tested this code, but the behavior is the same (I tested with Google Chrome)

Collectives™ on Stack Overflow

Print image with Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related