Question

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.

Answer 1

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.