복붙노트

[JQUERY] 어떻게 자바 스크립트를 사용하여 이미지 크기 (높이 및 폭)을 얻으려면?

JQUERY

어떻게 자바 스크립트를 사용하여 이미지 크기 (높이 및 폭)을 얻으려면?

해결법

  1. 1.프로그래밍 방식으로 이미지를 얻을 자바 스크립트를 사용하여 치수를 확인하실 수 있습니다 ...

    프로그래밍 방식으로 이미지를 얻을 자바 스크립트를 사용하여 치수를 확인하실 수 있습니다 ...

    CONST IMG 새로운 이미지를 () =; img.onload = 함수 () { 경고 (this.width + 'X'+ this.height); } img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

    이미지가 마크 업의 일부가 아닌 경우에 유용 할 수 있습니다.

  2. 2.clientWidth와 clientHeight는 DOM 요소 (배제 한계와 경계)의 내측 치수의 현재의 브라우저 크기를 표시 DOM 속성이다. IMG 소자의 경우 그래서, 가시 화상의 실제 크기를 얻을 것이다.

    clientWidth와 clientHeight는 DOM 요소 (배제 한계와 경계)의 내측 치수의 현재의 브라우저 크기를 표시 DOM 속성이다. IMG 소자의 경우 그래서, 가시 화상의 실제 크기를 얻을 것이다.

    var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

  3. 3.또한 (렉스와 이안의 답변에 추가로)가있다 :

    또한 (렉스와 이안의 답변에 추가로)가있다 :

    imageElement.naturalHeight

    과

    imageElement.naturalWidth

    이러한 이미지 파일 자체 (보다는 이미지 요소)의 높이와 폭을 제공한다.

  4. 4.당신이 jQuery를 사용하고 이미지를 요청하는 경우가로드 될 때까지 기다릴 필요가 또는 당신은 단지 제로를 얻을 것이다 크기.

    당신이 jQuery를 사용하고 이미지를 요청하는 경우가로드 될 때까지 기다릴 필요가 또는 당신은 단지 제로를 얻을 것이다 크기.

    $(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

  5. 5.나는 가장 투표 응답 중 하나가 지금은 사용되지 않습니다 생각 clientWidth와 clientHeight를 사용하여 제안하기 때문에 이러한 답변에 대한 업데이트가 유용하다고 생각합니다.

    나는 가장 투표 응답 중 하나가 지금은 사용되지 않습니다 생각 clientWidth와 clientHeight를 사용하여 제안하기 때문에 이러한 답변에 대한 업데이트가 유용하다고 생각합니다.

    나는 값이 실제로 반환받을하는보고, HTML5 몇 가지 실험을 수행했다.

    우선, 나는 이미지 API의 개요를 얻을 대쉬라는 프로그램을 사용했다. 이것은 그 높이와 폭 상태와 naturalHeight naturalWidth 이미지의 렌더링 및 그 높이 / 폭은 상기 이미지의 본래 높이 / 너비 (단 HTML5이다)이다.

    나는 높이 (300) 및 (400)의 폭과이 자바 스크립트 파일에서, 아름다운 나비의 이미지를 사용 :

    var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

    그럼 난 높이와 폭에 대한 인라인 CSS와 함께,이 HTML을 사용했다.

    <img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

    결과 :

    /*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

    나는 그 다음에 HTML을 변경 :

    <img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

    즉 높이와 폭을 사용하여 인라인 스타일 속성보다는

    결과 :

    /*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

    나는 그 다음에 HTML을 변경 :

    <img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

    즉, 우선 순위를 걸립니다보고, 속성과 CSS를 모두 사용.

    결과 :

    /*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

  6. 6.JQuery와 이렇게 사용 :

    JQuery와 이렇게 사용 :

    var imgWidth = $("#imgIDWhatever").width();

  7. 7.다른 모든 깜빡 한 것은 당신이 그것을로드되기 전에 이미지 크기를 확인하지 못할 것입니다. 때 모든 게시 방법의 저자 검사에만 로컬 호스트에서 아마 작동합니다. jQuery를 여기에 사용할 수 있기 때문에, 이미지를로드하기 전에 '준비'이벤트가 발생한다 기억한다. $ ( '#의 XXX'). 폭 ()와 .height의 ()는 나중에 onload 이벤트 또는 해고해야한다.

    다른 모든 깜빡 한 것은 당신이 그것을로드되기 전에 이미지 크기를 확인하지 못할 것입니다. 때 모든 게시 방법의 저자 검사에만 로컬 호스트에서 아마 작동합니다. jQuery를 여기에 사용할 수 있기 때문에, 이미지를로드하기 전에 '준비'이벤트가 발생한다 기억한다. $ ( '#의 XXX'). 폭 ()와 .height의 ()는 나중에 onload 이벤트 또는 해고해야한다.

  8. 8.실제로 완성 된로드를 가질 때까지 이미지의 크기를 알 수없는 것처럼 당신은 정말로드 이벤트의 콜백을 사용하여이 작업을 수행 할 수 있습니다. 아래의 코드처럼 뭔가 ...

    실제로 완성 된로드를 가질 때까지 이미지의 크기를 알 수없는 것처럼 당신은 정말로드 이벤트의 콜백을 사용하여이 작업을 수행 할 수 있습니다. 아래의 코드처럼 뭔가 ...

    var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

  9. 9.가정, 우리는 < "..."IMG 아이디 = "AN-IMG"SRC>의 이미지 크기를 얻으려면

    가정, 우리는 < "..."IMG 아이디 = "AN-IMG"SRC>의 이미지 크기를 얻으려면

    // Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

    자연 치수

    el.naturalWidth 및 el.naturalHeight은 우리에게 자연의 크기, 이미지 파일의 크기를 얻을 것이다.

    레이아웃 크기

    el.offsetWidth 및 el.offsetHeight 우리에게 요소가 문서에 렌더링되는 차원을 얻을 것이다.

  10. 10.이제 우리는 하나 개의 간단한 기능으로 여기 배운 모든 것을 결합하자 (imageDimensions ()). 그것은 약속을 사용합니다.

    이제 우리는 하나 개의 간단한 기능으로 여기 배운 모든 것을 결합하자 (imageDimensions ()). 그것은 약속을 사용합니다.

    // 도우미는 이미지의 크기를 얻을 수 있습니다 const를 imageDimensions = 파일 => 새로운 약속 ((해결, 거부) => { CONST IMG = 새 이미지 () // 다음 핸들러는 이미지의 성공적인로드 후에 실행됩니다 img.onload = () => { CONST {naturalWidth : 폭 naturalHeight : 신장} = IMG 리졸 ({폭, 높이}) } // 이미지에 오류가 발생했을 경우이 핸들러가 실행됩니다 (같은 정말 아니라면 이미지 또는 손상된 하나) img.onerror = () => { ( '이미지와 약간의 문제가 발생했습니다.') 거부 } img.src = URL.createObjectURL (파일) }) // 여기에 도우미를 사용하는 방법 CONST 된 getInfo = 비동기 ({타겟 {파일}}) => { CONST [파일] = 파일 {시도 CONST 치수 = AWAIT imageDimensions (파일) console.info (치수) } 캐치 (오류) { console.error (오류) } } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"> 이미지를 선택 :
    <작은이> 그것은 오프라인으로 작동합니다.

  11. 11.확인 얘들 아, 난 파일이에로드되기 전에 다음 명령문이 호출 된 것이기 때문에, 그렇지 않으면 '0 * 0'으로 표시됩니다, 나는 그것의 속성을 알아 내려고하기 전에 이미지로드를 할 수 있도록 소스 코드를 개선 생각 브라우저. jQuery를 필요 ...

    확인 얘들 아, 난 파일이에로드되기 전에 다음 명령문이 호출 된 것이기 때문에, 그렇지 않으면 '0 * 0'으로 표시됩니다, 나는 그것의 속성을 알아 내려고하기 전에 이미지로드를 할 수 있도록 소스 코드를 개선 생각 브라우저. jQuery를 필요 ...

    function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

  12. 12.jQuery를 라이브러리 -와

    jQuery를 라이브러리 -와

    .height의 .width 사용 ()와 ().

    추가의 jQuery jQuery를 폭과 높이이다.

    $ (문서) .ready (함수 () { $ ( "버튼"). (함수 ()을 클릭합니다 { 경고 ( "이미지의 폭 :"+ $ ( "#의 img_exmpl") 폭 ().); 경고 ( "이미지의 높이". + $ ( "#의 img_exmpl") 높이 ()); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> <버튼> IMG 의 디스플레이 사이즈

  13. 13.실제 이미지 크기를 사용하기 전에 당신은 원본 이미지를로드해야합니다. 당신이 JQuery와 프레임 워크를 사용하는 경우는 간단한 방법으로 실제 이미지 크기를 얻을 수 있습니다.

    실제 이미지 크기를 사용하기 전에 당신은 원본 이미지를로드해야합니다. 당신이 JQuery와 프레임 워크를 사용하는 경우는 간단한 방법으로 실제 이미지 크기를 얻을 수 있습니다.

    $("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

  14. 14.이 답변은 내가 (jQuery를에있는)을 찾고 정확히 무엇을했다 :

    이 답변은 내가 (jQuery를에있는)을 찾고 정확히 무엇을했다 :

    var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

  15. 15.이 2019에서 자바 스크립트 및 / 또는 타이프 라이터를 사용하는 일부 사람들에게 도움이 될 줄 알았는데.

    이 2019에서 자바 스크립트 및 / 또는 타이프 라이터를 사용하는 일부 사람들에게 도움이 될 줄 알았는데.

    일부는 잘못된 것으로, 제안으로 나는 다음을 발견 :

    let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

    이 올바른 것입니다 :

    let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

    결론:

    온로드 기능의 사용 IMG가 아니라이.

  16. 16.JQuery와 답 :

    JQuery와 답 :

    $height = $('#image_id').height();
$width  = $('#image_id').width();

  17. 17.최근에 나는 플렉스 슬라이더의 오류에 대한 동일한 문제가 있었다. 첫 번째 이미지의 높이로 인해 적재 지연을 작게 설정 하였다. 나는 그 문제를 해결하기 위해 다음과 같은 방법을 시도하고 일입니다.

    최근에 나는 플렉스 슬라이더의 오류에 대한 동일한 문제가 있었다. 첫 번째 이미지의 높이로 인해 적재 지연을 작게 설정 하였다. 나는 그 문제를 해결하기 위해 다음과 같은 방법을 시도하고 일입니다.

    // create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

    이것은 당신이 원래의 폭 또는 제로보다는 설정 폭에 대한 당신의 높이를 줄 것이다.

  18. 18.당신은 또한 사용할 수 있습니다 :

    당신은 또한 사용할 수 있습니다 :

    var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

  19. 19.니키 드 Maeyer는 배경 그림 후 질문; 단순히 ") (URL"는 CSS에서 그것을 얻을하고 교체 :

    니키 드 Maeyer는 배경 그림 후 질문; 단순히 ") (URL"는 CSS에서 그것을 얻을하고 교체 :

    var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

  20. 20.당신은 온로드 핸들러 속성을 적용 할 때이 같은 JS 또는 JQuery와에 페이지가로드 -

    당신은 온로드 핸들러 속성을 적용 할 때이 같은 JS 또는 JQuery와에 페이지가로드 -

    $(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

  21. 21.간단하게, 당신은 다음과 같이 테스트 할 수 있습니다.

    간단하게, 당신은 다음과 같이 테스트 할 수 있습니다.

      <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

  22. 22.

    var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

  23. 23.이 브라우저는 부모 사업부에서 설정 해석 제거하는 것이 중요하다. 당신은 실제 이미지의 폭과 높이를 원한다면 당신은 사용 할 수 있습니다

    이 브라우저는 부모 사업부에서 설정 해석 제거하는 것이 중요하다. 당신은 실제 이미지의 폭과 높이를 원한다면 당신은 사용 할 수 있습니다

    $('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

    나는 올바른 관계와 그것을 확장 할 수있는 이미지의 실제 특성을 필요로하는 곳은 나에게 하나의 TYPO3 프로젝트의 예입니다.

  24. 24.

    var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

    이건 내 방법이 도움이되기를 바랍니다. :)

  25. 25.

    function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

    여러 이미지 미리보기 및 업로드 작품. 당신은 하나 이미지를 하나의 각각 선택해야합니다. 그런 다음 미리보기 이미지 기능과 유효성 모두에 복사와 과거!

  26. 26.취득 요소의 속성 전에 문서 페이지는 온로드해야합니다 :

    취득 요소의 속성 전에 문서 페이지는 온로드해야합니다 :

    window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

  27. 27.우리가 올바른 파일을 선택할 때 단지 그것이 netural 높이와 화상의 폭을 제공 할 입력 요소에 의해 얻어지는 IMG 파일 오브젝트를 전달할

    우리가 올바른 파일을 선택할 때 단지 그것이 netural 높이와 화상의 폭을 제공 할 입력 요소에 의해 얻어지는 IMG 파일 오브젝트를 전달할

    function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}

  28. 28.시험

    시험

    함수의 크기 () { document.body.innerHTML + =`로
    폭 : $ {pic.width}, 높이 : $ {pic.height}` } <버튼의 onclick = "크기 ()"> 표시 사이즈

    29. from https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 테이블 행 추가  (0) 2020.09.22
[JQUERY] jQuery를 / 자바 스크립트가 깨진 이미지를 교체  (0) 2020.09.22
[JQUERY] 어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는?  (0) 2020.09.22
[JQUERY] 자바 스크립트 / jQuery를 사용하여 파일 다운로드  (0) 2020.09.22
[JQUERY] AJAX와 크로스 도메인 엔드 포인트로드  (0) 2020.09.22
,

티스토리툴바