получение размера изображения по ссылке в виде динамического контента

Question

Я хочу сделать предпросмотр изображения внутри страницы. У меня будет «div» для включения меньших изображений, установив размер «img» вручную. Затем при щелчке или наведении изображение отобразится в большем элементе div, таком же маленьком, как само изображение, или в размере, равном размеру окна рядом с указателем мыши. код будет содержать только ссылку на изображение и оттуда получит фактический размер изображения.

Установка размера и положения предпросмотра "div" - это просто математическая проблема для меня. но я не могу найти, как получить размер изображения по ссылке. Я пытался получить только неопределенные значения, если не ошибки.

Будьте осторожны, отвечая, что большинство методов мышления получают размер от самого элемента "img", если заданы размеры, но возвращают ноль, если нет.

ВНИМАНИЕ: это похоже на Как получить размер изображения (высоту и ширину) с помощью JavaScript? , но (a) принятый ответ не работает для меня. это дает или 0x0 или неопределенный. (б) предложенный ответ Джоша Стодола работает, только если изображение загружено с окном. моя ссылка динамическая.

это также похоже на Получить высоту ширины удаленного изображения из URL . Он работает с функцией оповещения, но я не могу получить размер указанных функций, так как они мне нужны для расчетов.

Answer 1

Благодаря @dcr я решил проблему. Он помог мне с кодом, и я увидел проблему, которая смутила меня.

В этих ответах на другие сообщения чаще всего используется функция «оповещения», которая не является хорошим способом показать, как получить требуемое значение, в моем случае размер изображения.

Здесь, в этом коде, ясно видно, что функции "getMeta" и "caller" являются просто интерфейсом для "setter". Я могу ссылаться на любое требуемое значение из части «обратного вызова», и «сеттер» затем может быть расширен до потребностей, в моем случае вычисляя размер и положение моего средства просмотра «div». Единственная разница с решением @ dcr заключается в том, что функция "setter" выходит из функции "caller".

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>

Answer 2

Я обновил свой ответ. Теперь он запускается при наведении мыши и не использует идентификатор. Обязательно примите ответ, если он работает на вас.

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>