1

Есть ссылка на картинку, можно ли получить ширину высоту и размер картинки на js?

Пример кода на: jsfiddle.net

<a href="./img/1.jpg" >Картинка 1</a>
  <br>
<a href="./img/2.jpg" >Картинка 2</a>
  <br>
<a href="./img/3.jpg" >Картинка 3</a>
   <br><br>
<div id="image_url"></div>

JS:

$('a').click( function(e) {
    e.preventDefault();
 var img_url = $(this).attr('href');
 $("#image_url").text(img_url);     
});
3
  • .width(200); -- это установить, а получить var w = .... .width();
    – Stack
    16 янв 2016 в 19:57
  • @Stack Извините я вас не совсем понял. Мне нужно получить, реальную высоту и ширину картинки на js.
    – user199209
    16 янв 2016 в 20:01
  • лучше всего при генерации страницы их выяснять, вставлять как атрибут ссылки, а потом просто отображать при нажатии
    – cyadvert
    16 янв 2016 в 20:03

2 ответа 2

1

Получить размер картинки можно. Если нет возможности добавить атрибуты к ссылкам на сервере, можно сделать это на клиенте. Придется сделать ajax запрос до сервера, браузер подгрузит картинку, и размеры будут получены асинхронно:

$('a').click( function(e) {
    e.preventDefault();
    var img_url = $(this).attr('href');
    var img = new Image();
    img.src = img_url; //здесь начнется загрузка картинки
    img.onload = function(){
        console.log('LOAD', img.width, img.height); // а вот здесь мы уже знаем ее размеры
    };       
 });

Проверку на ошибку загрузки не добавлял.

0

Лучше всего при генерации страницы их выяснять, вставлять как атрибут ссылки, а потом просто отображать при нажатии.

Примерно так:

$('[data-href]').on('click', function() {
  $('#prev').attr('src', $(this).data('href'));
  var str = 'Пропорции: ' + $(this).data('dims') + '<br>Размер: ' + $(this).data('size');
  $('#descr').html(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-href="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" data-dims="200x300" data-size="500KB">Картинка 1</a>
<br>
<a data-href="http://maps.google.com/mapfiles/ms/icons/red-dot.png" data-dims="300x400" data-size="1MB">Картинка 2</a>
<br>
<a data-href="http://maps.google.com/mapfiles/ms/icons/green-dot.png" data-dims="400x500" data-size="123KB">Картинка 3</a>
<br>
<br>
<img id="prev" src="./img/none.jpg" alt="image" />
<div id="descr"></div>

5
  • Ответ хороший, только я не могу изменить ссылки на картинки, потому что они генерируются скриптом на php.
    – user199209
    16 янв 2016 в 20:13
  • Но все равно что-то менять придётся. Может быть тогда ajax запрос делать, который вернёт все необходимое?
    – cyadvert
    16 янв 2016 в 20:18
  • Так об Ajax я тоже думал, на php это было бы гораздо проще, но за какой-то картинки постоянно отправлять запросы.
    – user199209
    16 янв 2016 в 20:29
  • Ну и что? Если Ващ запрос только проверяет картинки, т.е. только с файлами работает, то Ваш сервер этого даже не заметит
    – cyadvert
    16 янв 2016 в 21:00
  • Обновил вопрос. Половину дела уже решил, осталось получить ширину высоту и размер картинки.
    – user199209
    16 янв 2016 в 21:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.