Question

我想在页面内制作图像预览器。通过手动设置“img”的大小，我将有一个“div”来包含较小的图像。然后单击或悬停，图像将显示在更大的“div”上，与图像本身一样小或者与鼠标指针附近的窗口视图大小一样大。代码将只有图像链接，并从那里获得实际的图像大小。

设置预览器“div”的大小和位置对我来说只是一个数学问题。但我似乎无法通过链接找到如何获得图像大小。如果没有错误，我只尝试获取大多数未定义的值。

在回答大多数思考方法时，如果设置了大小，大多数思维方法从“img”元素中获取大小，请小心，否则返回null。

注意：这与How to get image size (height & width) using JavaScript?类似，但（a）接受的答案对我不起作用。它给出0x0或未定义。（b）建议Josh Stodola的答案只有在装有窗户的图像时才有效。我的链接是动态的。

这也与Get width height of remote image from url类似。它适用于警报功能，但我不能从所述函数中获取大小，因为我需要它们进行计算。

Answer 1

我更新了我的答案。它现在在鼠标悬停事件上触发，并且不使用ID。如果这对您有用，请务必接受答案。

＆＃13;

function getMeta(imageSrc,callback) {
   var img = new Image();
   img.src = imageSrc;
   img.onload = function() { callback(this.width, this.height); }
}

function hoverLink(imageSrc){
    getMeta(
        imageSrc,
        function(width, height) { 
            document.getElementById("prev").innerHTML = width + 'px ' + height + 'px';
        }
    );
}

function hoverOff(){  
   document.getElementById("prev").innerHTML =''; 
}

＆＃13;

<a href="https://res.cloudinary.com/rss81/image/upload/gw.jpg"
   onmouseover="hoverLink(this.href)"
   onmouseout="hoverOff()">
 Picture Link
</a>

<div id='prev'></div>

＆＃13;

Answer 2

感谢@dcr，我遇到了问题。他帮我编写代码，我看到了让我感到困惑的问题。

其他帖子的答案大多使用“提醒”功能，这不是一个很好的方式来展示如何获得所需的值，在我的情况下是图像的大小。

在此代码中，可以清楚地看到“getMeta”和“caller”函数仅仅是“setter”的接口。我可以从“回调”部分引用任何所需的值，然后“setter”可以扩展到需要，在我的情况下计算我的预览器“div”的大小和位置。与@dcr 's solution的唯一区别是从“调用者”函数中获取“setter”函数。

function getMeta(imageSrc,callback) {
    var img = new Image();
    img.src = imageSrc;
    img.onload = function() { callback(this.width, this.height); }
}

function caller(imageSrc){
    getMeta( imageSrc,setter);
}

function setter(width, height) { 
    document.getElementById("prev").innerHTML = width + 'px X ' + height + 'px';
}

<a href="https://res.cloudinary.com/rss81/image/upload/gw.jpg" onmouseover="caller(this.href)">Picture Link</a>

<div id='prev'></div>

从链接获取图像大小作为动态内容

2 个答案: