How to Print Image from Browser Using JavaScript

How to Print Images From The Web In a For Loop

You were placing semicolons after your for loop conditions:

for (var i = 0; i < some_list.length; i++) /* NO SEMICOLON HERE*/ {
    //body
}

Remove them and it works:

const forrest = ["https://cdn.pixabay.com/photo/2020/03/20/13/23/mountain-4950653_1280.jpg", "https://cdn.pixabay.com/photo/2020/01/07/14/18/forrest-4747692_1280.jpg", "https://cdn.pixabay.com/photo/2018/07/30/11/30/landscape-3572374_1280.jpg"] 

const people = ["https://cdn.pixabay.com/photo/2014/09/07/21/52/city-438393_1280.jpg", "https://cdn.pixabay.com/photo/2015/05/15/14/50/concert-768722_1280.jpg", "https://cdn.pixabay.com/photo/2017/08/06/12/06/people-2591874__480.jpg"]

const ocean = ["https://cdn.pixabay.com/photo/2016/11/29/04/19/ocean-1867285_1280.jpg", "https://cdn.pixabay.com/photo/2018/06/13/18/20/wave-3473335__340.jpg", "https://cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559__340.jpg"]

const type = [forrest, people, ocean] 

function myFunction() {
  for (var i = 0; i < type.length; i++) {
    var list = type[i];
    for (var pictures = 0; pictures < list.length; pictures++) { 
      var img = document.createElement("img"); 
      img.src = list[pictures]; 
      document.body.appendChild(img); 
    }
  }
}
debugger;
myFunction();

Browser print, doesn´t show images

Ok, so there is no way to make "PrintThis" print my images.

But i found a way in CSS:

.lkbLoggo{
    width: 9.182cm !important;
    height: 2.721cm !important;
    margin-top: 0.199cm !important;
    background-image: url("/img/lkb_logga2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

Just add !importantafter each line and it shows in the print.

Now.. i´d like a funktion to make a whole class important, instead of adding it to every row.

How to print a image file in printer

You will receive image id using both
h:form and h:graphicImage tag id's

The Java script is :

 function printImage()         
 {            
   var iamgeId = document.getElementById('fileViewerForm:imageViewer');

   var imagObject = new Image();
   imagObject = iamgeId;
   var originalImage = '<img id="imageViewer" src="'+imagObject.src+'" 
                        height="'+imagObject.height+'"
                         width="'+imagObject.width+'" />';

   popup =  window.open('','popup','toolbar=no,menubar=no,width=200,height=150');
   popup.document.open();
   popup.document.write("<html><head></head><body onload='print()'>");
   popup.document.write(originalImage);
   popup.document.write("</body></html>");
   popup.document.close();           
}

JSF code is :

  <h:commandButton value="Print" onclick="printImage();"/><br>
       <rich:panel id="imageViewerPanel">                

            <h:graphicImage id="imageViewer" url="sampleImage.png"
                            value="sampleImage.png" width="200"
                                                     height="200" />
       </rich:panel>
  </h:panelGrid>

It works on FireFox 3.0.18.

By,

Eswara Moorthy, NEC.

How to Print Image from Browser Using JavaScript

How to Print Images From The Web In a For Loop

Browser print, doesn´t show images

How to print a image file in printer

Related Topics

Leave a reply