Get Width Height of Remote Image from Url

Get width height of remote image from url

Get image size with JavaScript

In order to read the data from an image you'll need to make sure it's first loaded. Here's a callback-based approach and two promise-based solutions:

Callback

const getMeta = (url, cb) => {
  const img = new Image();
  img.onload = () => cb(null, img);
  img.onerror = (err) => cb(err);
  img.src = url;
};

// Use like:
getMeta("https://i.stack.imgur.com/qCWYU.jpg", (err, img) => {
  console.log(img.naturalWidth, img.naturalHeight);
});

Javascript: How to get width of image URL

If you append the image you create to the DOM then you should find that the width is then calculated and is then available as normal

var img = document.createElement("img");
img.src = "http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png";
img.onload = function(){
    img.style.height = "200px";
    img.style.visibility = 'hidden';
    document.body.appendChild(img);
    console.log(img.clientWidth);
}

How can i catch the width and height of a image link in angular?

Here is the javascript way :

function getImageDimenstion(imgUrl){
   let img = new Image(); 
   img.src = imgUrl;   img.onload = function (event) {        let  loadedImage = event.currentTarget;        let width = loadedImage.width;        let height = loadedImage.height;        console.log('height: '+height);        console.log('width: '+width);   } }
const url= "https://www.w3schools.com/bootstrap/paris.jpg";getImageDimenstion(url);

How to get image size from URL

Try this code it is working

var tmpImg = new Image();
tmpImg.src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"; //or  document.images[i].src;
$(tmpImg).one('load',function(){
  orgWidth = tmpImg.width;
  orgHeight = tmpImg.height;
  alert(orgWidth+"x"+orgHeight);
});

The above code will gets the image dimension.

For the file size:
No, there is no way you can get the image size using jQuery or pure JavaScript. The only way is to get it from server side using ajax.

You can get the image url send it to a service or server side page and have the page or service return the image size.

getting size of image from a link as dynamic content

I updated my answer. It now triggers on a mouseover event and doesn't use an ID. Be sure to accept the answer if this is working for you.

function getMeta(imageSrc,callback) {   var img = new Image();   img.src = imageSrc;   img.onload = function() { callback(this.width, this.height); }}
function hoverLink(imageSrc){    getMeta(        imageSrc,        function(width, height) {             document.getElementById("prev").innerHTML = width + 'px ' + height + 'px';        }    );}
function hoverOff(){     document.getElementById("prev").innerHTML =''; }

<a href="https://res.cloudinary.com/rss81/image/upload/gw.jpg"   onmouseover="hoverLink(this.href)"   onmouseout="hoverOff()"> Picture Link</a>
<div id='prev'></div>

Get the width and height of an image without downloading it

You will most likely not be able to do so without actually downloading the image (as in using the bandwidth).

That being said, you can use the FastImage gem to do this for you.

require 'fastimage'

FastImage.size("http://stephensykes.com/images/ss.com_x.gif")
=> [266, 56]  # width, height

Get image dimensions from url path

I've used this library to perform the operation successfully.

---

Related Topics