Question

27

Print image with Javascript

rated 0 times [ 29] [ 2] / answers: 1 / hits: 20986 / 11 Years ago, mon, december 16, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

havenbilliec questions

1 Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Thu, Mar 3, 22, 00:00, 2 Years ago

1 React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Warning: A component is changing a controlled input to be uncontrolled in React js

Fri, May 7, 21, 00:00, 3 Years ago

1 Error: Cannot find module nuxt.js, why my app don't start?

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Redirecting to another html page after successful login attempt

Wed, Nov 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago maleahp · Accepted Answer

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.