Javascript - 이미지 높이 가져오기

Javascript - 이미지 높이 가져오기

AJAX를 사용하여 웹 페이지에 많은 이미지를 표시해야 합니다.모두 치수가 다르기 때문에 표시하기 전에 크기를 조정하고 싶습니다.JavaScript에서 이 작업을 수행할 수 있는 방법이 있습니까?

PHP 사용getimagesize()이미지가 많으므로 각 이미지에 대해 불필요한 퍼포먼스 히트가 발생합니다.

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

이것을 시험해 보세요.

var curHeight;
var curWidth;

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

}

사용할 수 있습니다.img.naturalWidth그리고.img.naturalHeight픽셀 단위의 실제 이미지 치수를 가져오다

...그렇지만.....바이트를 브라우저로 전송하여 거기에서 하는 것보다 서버 측에서 이미지 크기를 조정하는 것이 더 낫지 않을까요?

이미지 크기를 조정한다는 것은 HTML 이미지 태그의 높이와 폭을 설정하는 것이 아닙니다.이렇게 해도 서버에서 클라이언트로 대량의 바이트를 발송할 수 있습니다.서버측에서 이미지 자체를 조작할 수 있습니다.

있습니다.NET C# 코드는, 이 어프로치를 채용하고 있습니다만, php 방법도 있을 필요가 있습니다.http://ifdefined.com/www/gallery.html

또, 서버측에서 실시하는 것으로, 1회만 조정을 실시해, 조정한 이미지를 보존할 수 있어 매우 고속입니다.

이 경우 불필요한 데이터를 덜 전송할 수 있도록 서버 사이드의 크기를 조정하는 것이 좋습니다.

다만, 클라이언트측에서 실시할 필요가 있어, 화상의 비율을 유지할 필요가 있는 경우는, 다음을 사용할 수 있습니다.

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

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>

이미지 자체를 조정하시겠습니까, 아니면 표시되는 방식만 조정하시겠습니까?전자의 경우는, 서버측에서 필요한 것이 있습니다.후자의 경우 이미지를 변경하기만 하면 됩니다.높이와 이미지.폭

Firefox 3와 Safari에서는 높이와 폭을 바꾸는 것만으로 이미지의 크기를 조정할 수 있습니다.다른 브라우저에서는 가장 가까운 네이버 재샘플링을 사용하기 때문에 매우 노이즈가 있을 수 있습니다.물론 더 큰 이미지를 제공하기 위해 비용을 지불해야 하지만, 그건 중요하지 않을 수도 있습니다.

만 하면 .<img>tag)style = "display none" jQuery를 Image()JavaScript를 사용하여 소스를 보이지 않는 이미지로 설정하고 위와 같은 크기를 얻습니다.

음... 이 질문을 해석하는 방법은 여러 가지가 있습니다.

첫 번째 방법이나 방법은 단순히 디스플레이 크기를 변경하여 모든 이미지가 같은 크기로 표시되도록 하는 것이라고 생각합니다.JavaScript의 CSS의 CSS를 참조해 주세요.및 높이 를 만들고 클래스를 수 있습니다.<img>태그는 이 클래스를 사용합니다.

두 번째 방법은 모든 이미지의 석면 비율을 유지하되 디스플레이 크기를 적절한 값으로 조정하는 것입니다.JavaScript로 접속하는 방법이 있습니다만, 빠른 코드 샘플을 작성하려면 조금 필요합니다.

세 번째 방법은 이미지의 실제 크기를 변경하는 것입니다.JavaScript는 이미지를 작성할 수 없을 뿐만 아니라 풀사이즈 이미지가 이미 전송되었기 때문에 이 작업은 서버 측에서 수행해야 합니다.

언급URL : https://stackoverflow.com/questions/106828/javascript-get-image-height