getting size of image from a link as dynamic content

Question

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.

DCR · Accepted Answer · 2018-04-30T23:34:04.267

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>

edited Apr 30 '18 at 23:34

answered Apr 30 '18 at 20:36

DCR

14,737
12
52
115

I don't use ID for images, thus I cant use it like this. link or image has "click/hover" event and assigned function should get image size and then show previewer. let's say it is showpre(this.href) for link or showpre(this.src) for image and print size into "div" element (first add a "div" of course"). "div" has ID. can you edit to reflect this? by the way, I guess I should add this comment into question to clarify it more unless you dont have time for more. – Yılmaz Durmaz Apr 30 '18 at 20:49
bla
... Instead of writing val, val will go into getMeta to get size, and size will be inserted into div content ... I guess if you can show how, I can continue from there – Yılmaz Durmaz Apr 30 '18 at 21:16
alert function is not what I need, can you print the size in the code fragment I gave in previous comment? – Yılmaz Durmaz Apr 30 '18 at 21:46
by the way, I managed to find the solution, but respecting your spent time, I will wait for your completed answer. – Yılmaz Durmaz Apr 30 '18 at 21:48
You don't really expect people to read code in a comment do you? Incorporate what I have into a snippet of what you are trying to do and I'll try to help you further. But, you already have the height and width in JS should be pretty easy to get what you're looking for. – DCR Apr 30 '18 at 21:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170113/discussion-between-yilmaz-durmaz-and-dcr). – Yılmaz Durmaz Apr 30 '18 at 21:51

Yılmaz Durmaz · Answer 2 · 2018-04-30T23:33:35.463

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>

getting size of image from a link as dynamic content

2 Answers2

Linked