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

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

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

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

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

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

Что ж ... Есть несколько способов истолковать этот вопрос.

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

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

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

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

var curHeight;
var curWidth;

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

}

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

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

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

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

Я искал решение для получения высоты и ширины изображения с помощью 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

Попробуйте с 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>

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

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