Javascript - Получить высоту изображения

Question

Мне нужно отобразить кучу изображений на веб-странице, используя AJAX. Все они имеют разные размеры, поэтому я хочу отрегулировать их размер перед отображением. Есть ли способ сделать это в JavaScript?

Использование PHP getimagesize() для каждого изображения приводит к ненужному снижению производительности, так как изображений будет много.

Answer 1

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

Наконец-то я нашел решение для получения высоты и ширины изображения, даже если изображение не существует в кэше браузера:

<script type="text/javascript">

  var imgHeight;
  var imgWidth;

  function findHHandWW() {
    imgHeight = this.height;
    imgWidth = this.width;
    return true;
  }

  function showImage(imgPath) {
    var myImage = new Image();
    myImage.name = imgPath;
    myImage.onload = findHHandWW;
    myImage.src = imgPath;
  }
</script>

Спасибо

Бинод Суман

http://binodsuman.blogspot.com/2009/06/how-to-get-height-and-widht-of-image.html

Answer 2

Попробуйте это:

var curHeight;
var curWidth;

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
curHeight = newImg.height;
curWidth = newImg.width;

}

Answer 3

... но ... не лучше ли настроить размер изображения на стороне сервера, а не передавать байты в браузер и делать это там?

Когда я говорю, отрегулируйте размер изображения, я не имею в виду установить высоту и ширину в теге изображения HTML. Если вы сделаете это, вы по-прежнему отправляете большое количество байтов с сервера на клиент. Я имею в виду, фактически манипулировать самим изображением на стороне сервера.

У меня есть код .NET C #, который использует этот подход, но для этого тоже должен быть способ php: http://ifdefined.com/www/gallery.html

Кроме того, если выполнить это на стороне сервера, это открывает возможность выполнить настройку только один раз, а затем сохранить настроенное изображение, что будет очень быстрым.

Answer 4

Попробуйте с JQuery:

<script type="text/javascript">
function jquery_get_width_height()
{
    var imgWidth = $("#img").width();
    var imgHeight = $("#img").height();
    alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight);
}
</script>

или

<script type="text/javascript">
function javascript_get_width_height()
{
    var img = document.getElementById('img');
    alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height);
}
</script>

Answer 5

Мое предпочтительное решение для этого было бы сделать изменение размера на стороне сервера, чтобы вы передавали меньше ненужных данных.

Если вам нужно сделать это на стороне клиента, и вам нужно сохранить соотношение изображений, вы можете использовать следующее:

var image_from_ajax = new Image();
image_from_ajax.src = fetch_image_from_ajax(); // Downloaded via ajax call?

image_from_ajax = rescaleImage(image_from_ajax);

// Rescale the given image to a max of max_height and max_width
function rescaleImage(image_name)
{
    var max_height = 100;
    var max_width = 100;

    var height = image_name.height;
    var width = image_name.width;
    var ratio = height/width;

    // If height or width are too large, they need to be scaled down
    // Multiply height and width by the same value to keep ratio constant
    if(height > max_height)
    {
        ratio = max_height / height;
        height = height * ratio;
        width = width * ratio;
    }

    if(width > max_width)
    {
        ratio = max_width / width;
        height = height * ratio;
        width = width * ratio;
    }

    image_name.width = width;
    image_name.height = height;
    return image_name;
}

Answer 6

Просто загрузите изображение в скрытый тег <img> (style = "display none"), прослушайте запуск события загрузки с помощью jQuery, создайте новый Image() с JavaScript, установите в качестве источника невидимое изображение и получите размер как выше.

Answer 7

Стоит отметить, что в Firefox 3 и Safari изменение размера изображения простым изменением высоты и ширины выглядит не так уж плохо. В других браузерах это может выглядеть очень шумно, потому что используется ресэмплинг ближайшего соседа. Конечно, вы платите за показ большего изображения, но это может не иметь значения.

Answer 8

Ну ... есть несколько способов интерпретировать этот вопрос.

Первый способ и способ, который, я думаю, вы имеете в виду, - это просто изменить размер дисплея, чтобы все изображения отображались одинакового размера. Для этого я бы использовал CSS, а не JavaScript. Просто создайте класс, для которого установлены соответствующие значения ширины и высоты, и заставьте все теги <img> использовать этот класс.

Второй способ заключается в том, что вы хотите сохранить пропорции всех изображений, но масштабировать размер экрана до нормального значения. Есть способ получить доступ к этому в JavaScript, но мне понадобится немного, чтобы написать быстрый пример кода.

Третий способ, и я надеюсь, что вы не имеете в виду этот способ, заключается в изменении фактического размера изображения. Это то, что вам нужно сделать на стороне сервера, поскольку JavaScript не только не может создавать изображения, но и не имеет никакого смысла, поскольку полноразмерное изображение уже отправлено.

Answer 9

Хотите сами настроить изображения или просто способ их отображения? Если первое, вы хотите что-то на стороне сервера. Если последнее, вам просто нужно изменить image.height и image.width.