www.webdeveloper.com
Results 1 to 2 of 2

Thread: Simple resize and print image, and multiple image print

Hybrid View

  1. #1
    Join Date
    Nov 2008
    Posts
    3

    Simple resize and print image, and multiple image print

    I am sure that this must be really simple but I'm not a java programmer and have absolutely no idea where to start. Please help.

    I am using this code:

    <script type="text/javascript">
    var pwin;
    function printImg() {
    pwin = window.open(document.getElementById("imgMain").src,"_blank");
    setTimeout("pwin.print()",20);
    }
    </script>


    I want to adapt it so that I can resize an image on print in one option and print multiple images in another option. I have no idea how to do this. Can anyone help? Many thanks.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    To print more than one image:
    Code:
    function ImagePrinter() {
      var i = 0;
      var end = arguments.length;
      
      this.initImages();
      this.initOptions();
      
      while (i < end) {
        this.addImage( arguments[i] );
        i++;
      }
    }
    ImagePrinter.prototype = {
      
      images : null,
      options : null,
      window : null,
      
      addImage : function(src) {
        return this.images.push(src) - 1;
      },
      
      initImages : function() {
        this.images = [];
      },
      
      initOptions : function() {
        this.options = [
          "width=400",
          "height=400",
          "scrollbars=yes",
          "location=no",
          "toolbar=no"
        ];
      },
      
      closeWindow : function() {
        if (this.window && this.window.close) {
          this.window.close();
          this.window = null;
        }
      },
      
      getImagesSource : function() {
        var i = 0;
        var end = this.images.length;
        var src = "";
        
        while (i < end) {
          src += '<img src="'+this.images[i]+'">';
          i++;
        }
        return src;
      },
      
      getOptions : function() {
        return this.options.join(",");
      },
      
      openWindow : function() {
        if (!this.window) {
          this.window = window.open("", "_blank", this.getOptions() );
        }
        this.window.focus();
      },
      
      print : function() {
        if (this.window) {
          this.closeWindow();
        }
        this.openWindow();
        this.window.document.write( this.getImagesSource() );
        this.window.document.close();
        this.window.onload = function() {
          print();
        };
      }
      
    };
    
    var p1 = new ImagePrinter("img1.jpg", "img2.jpg", ... , "imgN.jpg");
    p1.addImage("img.jpg");
    p1.addImage("cereal.jpg");
    Then in an onclick for a link or button, just call p1.print().

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles