I'm able to print the webpage with the image using JavaScript. But it will print out the whole page with white spaces. What can I do to be able to just print out the Image using JavaScript?
3 Answers
Load images on your page with just the necessary resolution you need. In your javascript, pass the highest resolution image url to Print.js for a better print quality.
Import printjs library: printJS('images/print-01-highres.jpg', 'image')
Check this JavaScript library which provide much more options to print from html view.
https://www.cssscript.com/javascript-library-printing-elements-page-print-js/
Comments
Use window.open to open the image in a separate window, then print that.
Alternately, hide everything except the image (using either JavaScript or @media CSS) before printing.
5 Comments
owen
When I use
window.open and print it, it will print out the whole page including white spaces. Can I hide those white spaces with CSS?
Amadan
If you use
window.open to open the image, there is no page to print, there is no white space to hide. There is just the image.owen
imgur.com/LOr2yTL. This is the image page imgur.com/h0BQnPi. This is the printing dialogue. You can see the huge white space around the image on the printing dialogue
Amadan
That's because that's the size of the image. If you cover a big table with a small tablecloth, the rest is not table-colored; it's the table you didn't cover. Either get a bigger image to cover more of the page, or open a page containing some HTML(+CSS) to stretch the image to your liking.
owen
I'll try it. Please post your latest comment as an answer, I'll mark it if I can get it work. Thanks!
You can use html2canvas (https://html2canvas.hertzen.com/) to capture the image (s) of your choice from html page and print them. Below is is simple code for capturing image or check fork of one of such example on codepen
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
