printing an image in HTML5/Javascript

Question

I am new in the web development world and I had the following question

I would like to implement a button in HTML5 that will Print an Image ( and not the whole HTML Page)

I tried the code in this question Print image on website

but I got an unhandled exception :

0x800a138f - Microsoft JScript runtime error : Umable to get value of the property 'innerHTML':object is null or undefined

can anyone guide me how to do this ?

Thanks!

Edit : When I say print , I mean prininting on a physical printer , and not displaying on the screen

aug · Accepted Answer · 2013-02-13 00:20:53Z

1

Something like this? I whipped this up

<!DOCTYPE>
<html>
<body>
<button onclick="showimage()">Click Here for Image</button>
</body>
<script type="text/javascript">
function showimage() {
    var _body = document.getElementsByTagName('body') [0];
    var img = document.createElement('img');
    //you can replace the link with any image you want
    img.setAttribute('src', 'http://i.123g.us/c/cute_teddy/card/109882.gif');
    img.setAttribute('alt', 'Picture');
    _body.appendChild(img);
}
</script>
</html>

jsFiddle Here

If you need help understanding how this works, don't hesitate to ask. Basically, we have a button and we create the img tag and set the appropriate attributes. Once we have successfully done that, we can then append it to the body of the HTML document so it displays. I suggest you get a good understanding of the DOM (Document Object Model) since you are new to web development/Javascript.

edited Feb 13, 2013 at 0:20

answered Feb 13, 2013 at 0:14

aug

11.8k10 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1415780 Over a year ago

thank you @aug for your response! I tried the code and it works!. it is just that it is not what I need to do . When I say print I meant printing on a physical printer (and not displaying it on the screen). Sorry for the confusion

user1415780 · Accepted Answer · 2013-02-22 22:19:16Z

0

so here is the very simple way of doing it :

<!DOCTYPE>
<html>
<body>
<button onclick="showimage()">Click Here for Image</button>
</body>
<script type="text/javascript">
function showimage() {
     if (typeof img== 'object')
                    img= img.src;
                window.win = open(img);
                setTimeout('win.document.execCommand("Print")', 500);
}
</script>
</html>

answered Feb 22, 2013 at 22:19

user1415780

1,1635 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

printing an image in HTML5/Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related