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.

Answers


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.


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.


Need Your Help

Python - chatbot A.I are there any that use nltk?

python artificial-intelligence nltk

I am attempting to make a chat A.I, I curious if anyone used nltk, and could point me in the direction on how it can be used to generate a response based on the information nltk gathers, and how wo...

How to tell when a TTTableViewController scrolls

ios three20

I'm using Three20's TTTableViewController and I'd like to know when the user scrolls the table view. With a regular UITableViewController I can just listen in on scrollViewDidScroll:. How can I do ...