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

Ответ 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

Ответ 2

Попробуйте следующее:

var curHeight;
var curWidth;

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

}

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Ответ 5

Попробуйте использовать 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>

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

Вы можете использовать img.naturalWidth и img.naturalHeight чтобы получить реальное измерение изображения в пикселях.