CODEWITHSUNDEEP
javascriptjquerycss
Loeli
Loeli

Reputation: 469

jQuery - How do I get the image width of an online image?

I have a project which consists of a HTML, JS and CSS file. When I open the project in my browser I have an input field (url input), a button and a canvas. After I insert the URL of an image in the input field and click the button, I want the canvas to resize according to the width and height of the image. Of course, I also want the image to be displayed in the canvas. Note: Later I want to add a functionality where someone can resize the image with a slider. This means that I really have to save the width of the image in a variable.

So, my main problem is that I don't know how to get the width of that image.

The last thing I tried is the following:

$('#btn_load').click(function () {
      input_url = $('#input_url');
      var url = input_url.val();
      var img_width = url.width;
      ...
    });

Would be glad about some help here, since I tried a lot of stuff in the last hours :)

EDIT:

I now also tried the following:

var inputURL, imgWidth;

inputURL = $('#input_url');

$('#btn_load').click(function () {
      var url = inputURL.val();
      var img = new Image();
      img.src = url;
      img.onload = function () {
        imgWidth = img.width;
      };

      canvas.css({
        'background-image': 'url(' + url + ')',
        //'background-size': 'cover',
      });
      //This is just to check the width value
      inputURL.val(imgWidth + url);
    });

But still doesn't work.

Upvotes: 1

Views: 196

Answers (3)

rabsom
rabsom

Reputation: 859

You should load the imag to get its natural width and height : 

var img = new Image();
img.src = $('#input_url').val();
img.onload = function () {
  imageWidth= img.naturalWidth;
  imageHeight = img.naturalHeight;
  ...
}

Upvotes: 0

Niels Van Steen
Niels Van Steen

Reputation: 308

This will get the img width and height in the global variables 'imgHeight' and 'imgWidth' It will also display the image on the screen, width a slider to make it bigger or smaller, the min and max value of the input type range are dynamically set to the original width and height divider by 2 or for the maximum multiplied by 2.

Javascript:

var imgHeight;
var imgWidth;
var img = new Image();

function LoadImage() {

    input_url = $('#input_url');
    img.src = input_url.val();
    //img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

    img.onload = function() {
        imgHeight = this.height;
        imgWidth = this.width;

        //alert(imgHeight + " : " + imgWidth);

        //Now set the image to html
        document.getElementById("imgID").src=img.src;

        //Now set the dimensions.
        $("#imgID").css({'height' : imgHeight+'px', 'width' : imgWidth+'px'});

        //Now set the range min to imgwidth / 2. and the max to imgwidth * 2 
        document.getElementById("range").min = imgWidth / 2;
        document.getElementById("range").max = imgWidth * 2;
        document.getElementById("range").value = imgWidth;
   }
}



function ChangeImageSize(value) {
    //Calculate new height so the image doesn't get stretched.
    newHeight = value / imgWidth * imgHeight;

    //Set the new width and height
    $("#imgID").css({'height' : newHeight+'px', 'width' : value+'px'}); 
}

HTML 

 <button onclick="LoadImage()">click me</button>
 <input type="range" id="range" oninput="ChangeImageSize(this.value)">
 <input type="text" id="input_url">
 <img id="imgID">

Upvotes: 1

Coskun Ozogul
Coskun Ozogul

Reputation: 2469

 <html>
 <head>
   <script src="https://code.jquery.com/jquery-3.5.1.js" > </script>

   <script>

   function loadUrl() {

    //You can get the value of your url_input and use it instead.
    var url = "https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"; //You can take it from your input_url
    $("#img-size").attr("src", url);


   };


     function imageLoaded(sender){
      alert($(sender).width() + 'x' + $(sender).height());
     }


  </script>

 </head>


<body>

 <img src="" id="img-size" onload="imageLoaded(this);">
 <input type="button" onclick="loadUrl();" id="btn_load" value="Load" />



</body>


</html>

Upvotes: 0

Related Questions