JavaScript 또는 jQuery를 사용하여 이미지의 자연스러운 크기를 얻는 방법은 무엇입니까?

Question

지금까지 다음 코드가 있습니다:

으아악

그러나 이로 인해 html 속성(CSS 스타일)이 제공됩니다. 파일의 실제 이미지 리소스 크기를 얻고 싶습니다.

이미지를 업로드한 후 너비가 0px로 설정되어 있는데 왜, 어디서 이런 일이 발생하는지 모르기 때문에 이것이 필요합니다. 이를 방지하기 위해 실제 치수를 가져와서 재설정하고 싶습니다. 가능합니까?

EDIT: naturalWidth를 얻으려고 해도 결과는 0입니다. 사진을 추가했습니다. 이상한 점은 새 파일을 업로드할 때만 이런 일이 발생하고 새로 고침 후에는 정상적으로 작동한다는 것입니다.

http://oi39.tinypic.com/3582xq9.jpg

Answer 1

Have img.naturalHeight 和 img.naturalWidth DOM 요소가 아닌 이미지 자체의 너비와 높이를 제공합니다.

Answer 2

naturalWidth和naturalHeight을 사용할 수 있습니다. 이러한 속성에는 이미지의 수정되지 않은 실제 너비와 높이가 포함되어 있지만 이를 가져오려면 이미지가 로드될 때까지 기다려야 합니다

으아악

이 기능은 IE9 이상만 지원합니다. 이전 브라우저를 지원해야 하는 경우 새 이미지를 만들고 소스를 동일한 이미지로 설정할 수 있습니다. 이미지 크기가 수정되지 않으면 이미지의 자연스러운 크기가 반환됩니다. , 왜냐하면 다른 크기가 지정되지 않은 경우 이것이 기본 크기가 되기 때문입니다

으아악

FIDDLE