getting size of image from a link as dynamic content

问题

I want to make an image previewer inside a page. I will have a "div" to include smaller images by setting the size of "img" by hand. Then clicked or hovered, the image will show on a bigger "div", as small as the image itself or as big as window view size near the mouse pointer. the code will have only image link and will get actual image size from there.

setting the size and position of previewer "div" is just a mathematical problem for me. but I can't seem to find how to get image size by the link. I tried only to get mostly undefined values if not errors.

Be careful while answering that most of the thought methods get the size from the "img" element itself if sizes are set, but returns null if not.

CAUTION: this is similar to How to get image size (height & width) using JavaScript? , but (a) accepted answer does not work for me. it gives either 0x0 or undefined. (b) suggested answer of Josh Stodola works only if image loaded with window. my link is dynamic.

this is also similar to Get width height of remote image from url. It works with alert function, but I cant get the size out of the said functions as I need them for calculations.

回答1:

I updated my answer. It now triggers on a mouseover event and doesn't use an ID. Be sure to accept the answer if this is working for you.

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 =''; 
}

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

<div id='prev'></div>

回答2:

Thanks to @dcr, I got the problem over. He helped me with the code, and I have seen the problem that confused me.

Those answers to other posts mostly used "alert" function, which is not a good way to show how to get required value, in my case the size of an image.

Here in this code, it can clearly be seen that "getMeta" and "caller" functions are merely an interface to "setter". I can reference any required value from "callback" part and "setter" can then be expanded to the needs, in my case calculating the size and position of my previewer "div". The only difference with @dcr 's solution is getting the "setter" function out of "caller" function.

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>

来源：https://stackoverflow.com/questions/50107271/getting-size-of-image-from-a-link-as-dynamic-content

标签

javascript

html

image

size