CODEWITHSUNDEEP
javascriptjqueryimagepopup
elo96
elo96

Reputation: 341

Using Javascript to pop up image in new window

I have a webpage in which an element is clicked on and an image is obtained from the server using a JQuery post function and should be displayed in a new window which is resized to the image. The relevant Javascript function is as follows (where myImage is the returned image in base 64 format). 

function showPicture(label) {
        var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
        $.post( 'picture-view', { labelname: label },
        function(myImage) {
            newWindow.document.write("<img src='data:image/png;base64," + myImage + "'/>");
            newWindow.resizeTo(newWindow.document.getElementsByTagName("img")[0].width,     newWindow.document.getElementsByTagName("img")[0].height+newWindow.outerHeight-newWindow.innerHeight);
            newWindow.focus(); 

        }
    );          
}

There are three things which are causing me problems.

  1. The image is inserted into the new window with a white border which I cannot figure out how to remove.

  2. The term newWindow.outerHeight-newWindow.innerHeight is supposed to account for the toolbar etc. when resizing the window, but both are being output as zero.

  3. This last one has really been annoying me. If I put the line var newWindow = window.open("", label,"scrollbars=0, toolbar=0"); within the callback function which starts on line four then the new window is created too small and will not be resized by the resizeTo function.

Any advice or directions to further reading would be very helpful.

Upvotes: 3

Views: 8534

Answers (2)

user1498339
user1498339

Reputation: 629

You can reference the image in the new window this way:

var img = $("img",newWindow.document)[0]; // Get my img elem

Adapting to your code:

function showPicture(label) {
    var newWindow = window.open("", label,"scrollbars=0, toolbar=0");
    $.post( 'picture-view', { labelname: label },
    function(myImage) {
        newWindow.document.write("<body marginheight='0' marginwidth='0'><img src='data:image/png;base64," + myImage + "'/></body>");
        var img = $("img",newWindow.document)[0];
        newWindow.resizeTo($(img).width(), $(img).height());
        alert($(img).width()+","+$(img).height()); //Just to check values
        newWindow.focus(); 
    });          
}

I guess the white border is due to body margins, so I added

<body marginheight='0' marginwidth='0'>

in

newWindow.document.write

to remove them.

I tested it in Firefox and it works but sometimes it opens a smaller window, maybe beacause the resize is done before the whole of the image is loaded. In this case you can add a window.setTimeout to avoid the problem.

Upvotes: 0

adeneo
adeneo

Reputation: 318352

You're using jQuery, so you could simplify this A LOT, but since you're already using plain JS for so much, I just kept going with it.

You should wait until the image is loaded before opening the new window, that way you can set the size to the same as the image, something like this:

function showPicture(label) {
    $.post( 'picture-view', { labelname: label }, function(ImageSrc) {
       var myImage = new Image;
           myImage.src = "data:image/png;base64," + ImageSrc;
           myImage.style.border = 'none';
           myImage.style.outline = 'none';
           myImage.style.position = 'fixed';
           myImage.style.left = '0';
           myImage.style.top = '0';
           myImage.onload = function() {        
               var newWindow = window.open("", label,"scrollbars=0, toolbar=0, width="+myImage.width+", height="+myImage.height);
                   newWindow.document.write(myImage.outerHTML);
          }​
    });
}

Here's a FIDDLE showing how it's done, with the base64 just added in the file as I did'nt have time to create some sort of fake Ajax function.

Upvotes: 1

Related Questions