3

我有一个网页，其中单击了一个元素，并使用 JQuery 发布功能从服务器获取了图像，并且应该显示在调整为图像大小的新窗口中。相关的 Javascript 函数如下（其中 myImage 是返回的 base 64 格式的图像）。

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(); 

        }
    );          
}

有三件事给我带来了问题。

  1. 图像被插入到带有白色边框的新窗口中，我无法弄清楚如何删除。

  2. 在调整窗口大小时，该术语newWindow.outerHeight-newWindow.innerHeight应该考虑工具栏等，但两者都输出为零。

  3. 最后一个真的让我很烦。如果我将该行var newWindow = window.open("", label,"scrollbars=0, toolbar=0");放在从第四行开始的回调函数中，则新窗口创建得太小，并且不会被 resizeTo 函数调整大小。

任何进一步阅读的建议或指导都会非常有帮助。

4

2 回答 2

1

你正在使用 jQuery，所以你可以简化很多，但是因为你已经在使用普通的 JS 了，所以我继续使用它。

您应该等到图像加载完毕后再打开新窗口，这样您就可以将大小设置为与图像相同，如下所示：

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);
          }​
    });
}

这是一个FIDDLE，展示了它是如何完成的，base64 刚刚添加到文件中，因为我没有时间创建某种假 Ajax 函数。

于 2012-07-16T15:41:03.720 回答
0

您可以通过这种方式在新窗口中引用图像：

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

适应您的代码：

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(); 
    });          
}

我猜白色边框是由于body margins，所以我添加了

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

在

newWindow.document.write

删除它们。

我在 Firefox 中对其进行了测试，它可以工作，但有时它会打开一个较小的窗口，可能是因为调整大小是在整个图像加载之前完成的。在这种情况下，您可以添加一个 window.setTimeout 来避免该问题。

于 2012-07-16T16:20:07.047 回答