자바 스크립트로 이미지의 실제 폭과 높이를 가져 오기? (사파리 / 크롬)

해결법

1.웹킷 브라우저 높이와 이미지가로드 된 후 폭 속성을 설정. 대신 시간 제한을 사용하여, 나는 이미지의 onload 이벤트를 사용하는 것이 좋습니다 것입니다. 다음은 간단한 예제이다 :

웹킷 브라우저 높이와 이미지가로드 된 후 폭 속성을 설정. 대신 시간 제한을 사용하여, 나는 이미지의 onload 이벤트를 사용하는 것이 좋습니다 것입니다. 다음은 간단한 예제이다 :
```
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });
```
이미지의 크기에 미칠 수있는 영향의 CSS 중 하나를 방지하기 위해, 위의 코드는 이미지의 메모리 복사에한다. 이 프로그램은 FDISK 제안은 매우 영리한 솔루션입니다.

또한 naturalHeight 및 naturalWidth HTML5 속성을 사용할 수 있습니다.
2.HTML5에서 naturalHeight 및 naturalWidth 속성을 사용합니다.

HTML5에서 naturalHeight 및 naturalWidth 속성을 사용합니다.

예를 들면 :
```
var h = document.querySelector('img').naturalHeight;
```
IE9 +, 크롬, 파이어 폭스, 사파리와 오페라 (통계)에서 작동합니다.
3.함수 getOriginalWidthOfImg (img_element) { var에 t 새로운 이미지를 () =; t.src = (img_element.getAttribute img_element.getAttribute ( "SRC") : 거짓) || img_element.src; t.width를 반환; }

함수 getOriginalWidthOfImg (img_element) { var에 t 새로운 이미지를 () =; t.src = (img_element.getAttribute img_element.getAttribute ( "SRC") : 거짓) || img_element.src; t.width를 반환; }
4.이미지가 웹킷 캐시에서로드되는 경우 onload 이벤트가 발생하지 않는 문제에 대한 허용 대답에서 많은 논의가있다.

이미지가 웹킷 캐시에서로드되는 경우 onload 이벤트가 발생하지 않는 문제에 대한 허용 대답에서 많은 논의가있다.

내 경우, 캐시 된 이미지 불을 온로드하지만, 높이와 너비는 0의 간단한의의 setTimeout 나를 위해 문제를 해결 여전히 :
```
$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});
```
내가 왜 onload 이벤트는 캐시에서 이미지가로드되는 경우에도 (? jQuery를 1.4 / 1.5의 개선을) 발사되는으로 말할 수 없다 -하지만 당신은 여전히이 문제, 내 대답과 VAR의 아마 조합을 발생하는 경우 SRC = img.src; img.src = ""; img.src = SRC; 기술은 작동합니다.

(. 내 목적을 위해, 나는 이미지의 속성이나 CSS 스타일에 하나, 미리 정의 된 치수에 대해 우려 아니에요 주 -.하지만 사비의 대답에 따라, 그 제거 또는 이미지를 복제 할 수 있습니다)
5.루트 문제는 웹킷 브라우저 (사파리와 크롬)로드 JavaScript와 병렬 CSS 정보입니다. 따라서, 자바 스크립트가 잘못된 답을 반환, CSS의 스타일 효과가 계산되기 전에 실행할 수 있습니다. jQuery를, 나는 솔루션 document.readyState == 때까지 기다려야하는 것으로 나타났습니다 '완전한', .e.g.,

루트 문제는 웹킷 브라우저 (사파리와 크롬)로드 JavaScript와 병렬 CSS 정보입니다. 따라서, 자바 스크립트가 잘못된 답을 반환, CSS의 스타일 효과가 계산되기 전에 실행할 수 있습니다. jQuery를, 나는 솔루션 document.readyState == 때까지 기다려야하는 것으로 나타났습니다 '완전한', .e.g.,
```
jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 
```
지금까지의 폭과 높이가 간다 ... 당신은 테두리와 패딩 등이 포함의 offsetWidth와는 offsetHeight를 할 수 있습니다 무엇을하고 있는지에 따라 달라집니다.
6.위해 window.onload 이벤트 내에서 발사하여 저 (사파리 3.2)이 작품 :

위해 window.onload 이벤트 내에서 발사하여 저 (사파리 3.2)이 작품 :
```
$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});
```
7.프로그래밍 방식으로 이미지를 얻을 모두에서 DOM 엉망으로하지 않고 자바 스크립트를 사용하여 크기를 확인할 수 있습니다.

프로그래밍 방식으로 이미지를 얻을 모두에서 DOM 엉망으로하지 않고 자바 스크립트를 사용하여 크기를 확인할 수 있습니다.
```
var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
```
8.무엇 image.naturalHeight 및 image.naturalWidth 속성에 대한?

무엇 image.naturalHeight 및 image.naturalWidth 속성에 대한?

전부는 아니지만 IE9 IE8에서 또는에서, 크롬, 사파리와 파이어 폭스에서 잘 작동 다시 꽤 몇 가지 버전으로 보인다.
9.jQuery를 당신은이 방법으로 사용할 수 naturalWidth 및 naturalHeight라는 두 가지 속성이 있습니다.

jQuery를 당신은이 방법으로 사용할 수 naturalWidth 및 naturalHeight라는 두 가지 속성이 있습니다.
```
$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight
```
어디 내-IMG 내 이미지를 선택하는 데 사용되는 클래스 이름입니다.

10.어떻게 우리가 깜짝 실제 이미지없이 바로 실제 치수를 얻을 :

어떻게 우리가 깜짝 실제 이미지없이 바로 실제 치수를 얻을 :

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

그것은

11.앞서 언급 한 바와 같이 이미지가 캐시에있는 경우, 사비 응답이 작동하지 않습니다. 웹킷에 문제의 응답은 너비 / 높이 attrs에 더 명시 적으로 img 태그에 설정되지 그렇다면, 이미지를 얻을 수있는 신뢰할 수있는 유일한 방법은 해고 될 window.load 이벤트를 기다리는 것입니다, 캐시 된 이미지의로드 이벤트를 발사하지 .

앞서 언급 한 바와 같이 이미지가 캐시에있는 경우, 사비 응답이 작동하지 않습니다. 웹킷에 문제의 응답은 너비 / 높이 attrs에 더 명시 적으로 img 태그에 설정되지 그렇다면, 이미지를 얻을 수있는 신뢰할 수있는 유일한 방법은 해고 될 window.load 이벤트를 기다리는 것입니다, 캐시 된 이미지의로드 이벤트를 발사하지 .

그것은 어떤 속임수없이 그 후 너비 / 높이와 IMG에 접근하는 것이 안전하므로 window.load 이벤트는 항상 실행됩니다.
```
$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});
```
당신이 캐시 (이전에로드)받을 수있는 동적으로로드 된 이미지의 크기를 얻을 필요가 있다면, 당신은 캐시 새로 고침을 트리거 사비 방법 플러스 쿼리 문자열을 사용할 수 있습니다. 단점은 이미 캐시 이미 사용할 수 있어야 IMG를 들어, 서버에 다른 요청을 일으킬 것입니다. 바보 웹킷.
```
var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});
```
PS : 당신이 이미 img.src에서 쿼리 스트링이있는 경우, 당신이 그것을 분석하고 캐시를 지우려면 추가 PARAM를 추가해야합니다.
12.루크 스미스가 말한대로, 이미지로드가 엉망이다. 그것은 모든 브라우저에서 신뢰할 수 없습니다입니다. 이 사실은 나에게 큰 고통을 주었다. 캐시 된 이미지가 말했다 사람들 있도록 "이미지로드가 더 나은에서는 setTimeout보다"잘못, 일부 브라우저에서 모두에서 이벤트가 발생하지 않습니다.

루크 스미스가 말한대로, 이미지로드가 엉망이다. 그것은 모든 브라우저에서 신뢰할 수 없습니다입니다. 이 사실은 나에게 큰 고통을 주었다. 캐시 된 이미지가 말했다 사람들 있도록 "이미지로드가 더 나은에서는 setTimeout보다"잘못, 일부 브라우저에서 모두에서 이벤트가 발생하지 않습니다.

루크 스미스의 솔루션은 여기에있다.

그리고이 엉망이 jQuery를 1.4에서 처리 할 수있는 방법에 대한 흥미로운 논의가있다.

나는 그 다음 0으로 폭을 설정 0보다 큰에 와서 진정한 폭 속성을 이동하려면 "전체"속성을 기다리는 꽤 안정적입니다 것으로 나타났습니다. 당신도 오류를보고합니다.

13.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

크리스 '의견에서 : http://api.jquery.com/load-event/

14.내 상황은 아마 조금 다르다. 동적으로 자바 스크립트를 통해 이미지의 SRC를 변경하고 새로운 이미지 (사진 갤러리) 고정 된 용기에 맞게 비례 적으로 크기가되어 있는지 확인하는 데 필요한입니다. I는 초기에 단지 폭을 제거하고, 그것을 (이미지의로드 이벤트를 통해) 로딩 바람직한 크기를 계산 한 후,이 재설정 된 후에 신장 된 이미지의 속성. 그러나, (나는 철저하게 IE에서 테스트하지 않은,하지만 이미지도 ... 그래서, 표시되지 않습니다) IE 사파리 가능성이 작동하지 않습니다.

내 상황은 아마 조금 다르다. 동적으로 자바 스크립트를 통해 이미지의 SRC를 변경하고 새로운 이미지 (사진 갤러리) 고정 된 용기에 맞게 비례 적으로 크기가되어 있는지 확인하는 데 필요한입니다. I는 초기에 단지 폭을 제거하고, 그것을 (이미지의로드 이벤트를 통해) 로딩 바람직한 크기를 계산 한 후,이 재설정 된 후에 신장 된 이미지의 속성. 그러나, (나는 철저하게 IE에서 테스트하지 않은,하지만 이미지도 ... 그래서, 표시되지 않습니다) IE 사파리 가능성이 작동하지 않습니다.

치수는 항상 하나 명의 이미지 뒤에 그래서 어쨌든, Safari는 이전 이미지의 크기를 유지합니다. 나는이 캐시 함께 할 수있는 뭔가가 있다고 가정합니다. 가장 간단한 해결책은 단지 복제 이미지로하고 DOM에 추가 그래서 (그것의 높이로를 얻을 DOM에 추가하는 것이 중요합니다). 이미지를 숨겨의 가시성 값 부여 (사용하지 않는 디스플레이 없음을 때문에 작동하지 않습니다). 당신이 얻을 후 치수는 복제를 제거합니다.

여기에 jQuery를 사용하여 내 코드는 다음과 같습니다
```
// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);
```
이 솔루션은 어떤 경우에 작동합니다.
15.http://github.com/peol/jquery.imgloaded/raw/master/ahpi : 캐시 된 이미지의로드 이벤트가 없습니다 화재 않는 경우를 처리 할 수있는 jQuery 플러그인, event.special.load, 지금있다. imgload.js

http://github.com/peol/jquery.imgloaded/raw/master/ahpi : 캐시 된 이미지의로드 이벤트가 없습니다 화재 않는 경우를 처리 할 수있는 jQuery 플러그인, event.special.load, 지금있다. imgload.js
16.최근에 나는 나타내는 그래프 .dialog의 기본 크기를 설정하는 폭과 높이를 찾을 필요가 있었다. 솔루션 I 이용했다 :

최근에 나는 나타내는 그래프 .dialog의 기본 크기를 설정하는 폭과 높이를 찾을 필요가 있었다. 솔루션 I 이용했다 :
```
 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })
```
FF3, 오페라 10, IE 8,7,6에서 나를 위해이 작품

추신 당신은 라이트 박스 또는 ColorBox 같은 일부 플러그인 내부에서 찾고 좀 더 솔루션을 찾을 수 있습니다
17.폴 아일랜드어의 GitHub의 데이비드 Desandro의 gitgub 제공 imagesLoaded (라는 함수)가 사비의 대답에 추가하려면 영리 original_src와 동일한 원리에 작동하고, .load () 이벤트를 트리거하지 일부 브라우저의 캐시 된 이미지의 문제를 해결 도착 (-> data_uri -> original_src 전환).

폴 아일랜드어의 GitHub의 데이비드 Desandro의 gitgub 제공 imagesLoaded (라는 함수)가 사비의 대답에 추가하려면 영리 original_src와 동일한 원리에 작동하고, .load () 이벤트를 트리거하지 일부 브라우저의 캐시 된 이미지의 문제를 해결 도착 (-> data_uri -> original_src 전환).

널리 IMO,이 문제에 대한 가장 강력한 솔루션 인에 기여, 정기적으로 사용 및 업데이트됩니다 있어요.

18.캐시 및 동적으로로드 된 이미지 모두를위한이 작동합니다.

캐시 및 동적으로로드 된 이미지 모두를위한이 작동합니다.

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

이 스크립트를 사용하려면 :

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

데모 : http://jsfiddle.net/9543z/2/

19.나는 imagesLoaded JQuery와 플러그인을 사용하여 몇 가지 해결 유틸리티 기능을 수행했습니다 : https://github.com/desandro/imagesloaded

나는 imagesLoaded JQuery와 플러그인을 사용하여 몇 가지 해결 유틸리티 기능을 수행했습니다 : https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

당신은 URL, 기능 및 컨텍스트를 전달하여이를 사용할 수 있습니다. 기능 이미지가로드 된 후에 수행 작성된 이미지의 폭과 높이를 반환한다.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

20.이미지가 이미 사용하는 경우, 다음을 수행해야합니다

이미지가 이미 사용하는 경우, 다음을 수행해야합니다
21.당신은 HTML 이미지 요소의 naturalWidth 및 naturalHeight 속성을 사용할 수 있습니다. (여기에 대한 추가 정보를 원하시면입니다).

당신은 HTML 이미지 요소의 naturalWidth 및 naturalHeight 속성을 사용할 수 있습니다. (여기에 대한 추가 정보를 원하시면입니다).

이처럼 사용합니다 :
```
//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;
```
이 버전 8 아래에서 IE를 제외하고 모든 브라우저에서 작동하는 것 같다.
22.나는 디오의 답을 체크 아웃하고 나를 위해 잘 작동합니다.

나는 디오의 답을 체크 아웃하고 나를 위해 잘 작동합니다.

$ ( '# 영상') fadeIn (10, 함수 () {VAR tmpW = $ (이) .width (); VAR tmpH = $ (이) .height의 ()}).;

당신이 아소 모든 함수를 호출 있는지 확인합니다. 그 fadeIn의 recaller 함수의 이미지 크기와 핸들 ().

이 주셔서 감사합니다.

23.단순히 이미지 객체를 사용중인 경우 이미지 크기를 얻기 위해 서버에 Ajax 호출을, 다른 접근 방식을 사용합니다.

단순히 이미지 객체를 사용중인 경우 이미지 크기를 얻기 위해 서버에 Ajax 호출을, 다른 접근 방식을 사용합니다.

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

물론 서버 측 코드 :

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

24.이 크로스 브라우저를 작동

이 크로스 브라우저를 작동

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];

사용하여 치수를 얻을

$(this).data('dimensions').width;
$(this).data('dimensions').height;

건배!

25.또 다른 제안은 imagesLoaded 플러그인을 사용하는 것입니다.

또 다른 제안은 imagesLoaded 플러그인을 사용하는 것입니다.
```
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
```

26.

$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        });

//이 코드는 200 * 274 치수 쇼 이미지에 도움이

27.여기에 크로스 브라우저 솔루션의 그 트리거 선택한 이미지를로드 이벤트 : http://desandro.github.io/imagesloaded/ 당신이 imagesLoaded () 함수 내에서 높이와 너비를 찾아 볼 수 있습니다.

여기에 크로스 브라우저 솔루션의 그 트리거 선택한 이미지를로드 이벤트 : http://desandro.github.io/imagesloaded/ 당신이 imagesLoaded () 함수 내에서 높이와 너비를 찾아 볼 수 있습니다.
28.내 자신의 질문에 대한 답을 찾으려고 노력이 스레드 우연히. 나는 로더 AFTER 함수에서 이미지의 너비 / 높이를 얻으려고 노력하고, 나를 위해 작동하기 때문에 당신은,하지만, 무엇을 찾고 있는지 수 있습니다 같은 0 I 느낌오고 유지 :

내 자신의 질문에 대한 답을 찾으려고 노력이 스레드 우연히. 나는 로더 AFTER 함수에서 이미지의 너비 / 높이를 얻으려고 노력하고, 나를 위해 작동하기 때문에 당신은,하지만, 무엇을 찾고 있는지 수 있습니다 같은 0 I 느낌오고 유지 :
```
tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}
```

29.GitHub의에서이 저장소를 확인하세요!

GitHub의에서이 저장소를 확인하세요!

좋은 예는 너비와 높이가 자바 스크립트를 사용하여 확인

https://github.com/AzizAK/ImageRealSize

--- 편집 일부 의견에서 요구 ..

자바 스크립트 코드 :

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

및 HTML 코드 :

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>

30.원래 위치 또는 이미지를 변경하지 않으려는 기능하십시오.

원래 위치 또는 이미지를 변경하지 않으려는 기능하십시오.
```
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
```

from https://stackoverflow.com/questions/318630/get-the-real-width-and-height-of-an-image-with-javascript-in-safari-chrome by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자식 앵커를 클릭하면 발사에서 부모의 온 클릭 이벤트를 방지합니까? (0)	2020.09.25
[JQUERY] 현지 날짜 시간에 UTC 날짜 시간 변환 (0)	2020.09.25
[JQUERY] jQuery로 다단계 양식을 재설정 (0)	2020.09.25
[JQUERY] 데이터 속성으로 요소 선택 (0)	2020.09.25
[JQUERY] 파일이 jQuery를 또는 순수 자바 스크립트에 있는지 어떻게 확인합니까? (0)	2020.09.25

복붙노트

[JQUERY] 자바 스크립트로 이미지의 실제 폭과 높이를 가져 오기? (사파리 / 크롬)

자바 스크립트로 이미지의 실제 폭과 높이를 가져 오기? (사파리 / 크롬)

해결법

1.웹킷 브라우저 높이와 이미지가로드 된 후 폭 속성을 설정. 대신 시간 제한을 사용하여, 나는 이미지의 onload 이벤트를 사용하는 것이 좋습니다 것입니다. 다음은 간단한 예제이다 :

2.HTML5에서 naturalHeight 및 naturalWidth 속성을 사용합니다.

3.함수 getOriginalWidthOfImg (img_element) { var에 t 새로운 이미지를 () =; t.src = (img_element.getAttribute img_element.getAttribute ( "SRC") : 거짓) || img_element.src; t.width를 반환; }

4.이미지가 웹킷 캐시에서로드되는 경우 onload 이벤트가 발생하지 않는 문제에 대한 허용 대답에서 많은 논의가있다.

6.위해 window.onload 이벤트 내에서 발사하여 저 (사파리 3.2)이 작품 :

7.프로그래밍 방식으로 이미지를 얻을 모두에서 DOM 엉망으로하지 않고 자바 스크립트를 사용하여 크기를 확인할 수 있습니다.

8.무엇 image.naturalHeight 및 image.naturalWidth 속성에 대한?

9.jQuery를 당신은이 방법으로 사용할 수 naturalWidth 및 naturalHeight라는 두 가지 속성이 있습니다.

10.어떻게 우리가 깜짝 실제 이미지없이 바로 실제 치수를 얻을 :

13.

15.http://github.com/peol/jquery.imgloaded/raw/master/ahpi : 캐시 된 이미지의로드 이벤트가 없습니다 화재 않는 경우를 처리 할 수있는 jQuery 플러그인, event.special.load, 지금있다. imgload.js

16.최근에 나는 나타내는 그래프 .dialog의 기본 크기를 설정하는 폭과 높이를 찾을 필요가 있었다. 솔루션 I 이용했다 :

18.캐시 및 동적으로로드 된 이미지 모두를위한이 작동합니다.

19.나는 imagesLoaded JQuery와 플러그인을 사용하여 몇 가지 해결 유틸리티 기능을 수행했습니다 : https://github.com/desandro/imagesloaded

20.이미지가 이미 사용하는 경우, 다음을 수행해야합니다

21.당신은 HTML 이미지 요소의 naturalWidth 및 naturalHeight 속성을 사용할 수 있습니다. (여기에 대한 추가 정보를 원하시면입니다).

22.나는 디오의 답을 체크 아웃하고 나를 위해 잘 작동합니다.

23.단순히 이미지 객체를 사용중인 경우 이미지 크기를 얻기 위해 서버에 Ajax 호출을, 다른 접근 방식을 사용합니다.

24.이 크로스 브라우저를 작동

25.또 다른 제안은 imagesLoaded 플러그인을 사용하는 것입니다.

26.

27.여기에 크로스 브라우저 솔루션의 그 트리거 선택한 이미지를로드 이벤트 : http://desandro.github.io/imagesloaded/ 당신이 imagesLoaded () 함수 내에서 높이와 너비를 찾아 볼 수 있습니다.

29.GitHub의에서이 저장소를 확인하세요!

30.원래 위치 또는 이미지를 변경하지 않으려는 기능하십시오.

'JQUERY' 카테고리의 다른 글

티스토리툴바