Using javascript to print images
Solution 1:
Another great solution!! All credit goes to Codescratcher
<script>
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 = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImagetoPrint(source));
pwa.document.close();
}
</script>
<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>
See the full example here.
Solution 2:
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
Solution 3:
Use this in the head block
<script type="text/javascript">
function printImg() {
pwin = window.open(document.getElementById("mainImg").src,"_blank");
pwin.onload = function () {window.print();}
}
</script>
use this in the body block
<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image" onclick="printImg()" />
Solution 4:
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.close();
}
}
popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();
MDN Reference code
Solution 5:
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 = window.open('about:blank', "_new");
win.document.open();
win.document.write([
'<html>',
' <head>',
' </head>',
' <body onload="window.print()" onafterprint="window.close()">',
' <img src="' + src + '"/>',
' </body>',
'</html>'
].join(''));
win.document.close();
}img {
display: block;
margin: 10px auto;
}
button {
font-family: tahoma;
font-size: 12px;
padding: 6px;
display: block;
margin: 0 auto;
}<img id="buzzBarcode" src="https://barcode.orcascan.com/qrcode/buzz.png?text=to infinity and beyond" width="150" height="150" />