How can I check an image width and height if I only have the URL of the image, and not the image itself?
i.e. Url might be something like
http://www.myadvertiserprovider.com/images/myuserid/ad_image.png
What I am trying to do is to skip inserting an ad into my page if the image dimensions are not exactly what I am expecting. I don't want to resize the image, I require the image to be the exact dimensions that I am expecting.
You will have to load the image. You can try something like
var img = new Image();
img.onload = function () {
alert("height: " + img.height + " width:" + img.width);
};
img.src = "https://www.gravatar.com/avatar/d17c95dfa5820a212d979da58bc3435c?s=128&d=identicon&r=PG";
DEMO
This cannot be done client-side without loading the image, unless the you request that the size of the image is written in the URI, something like image200x350.jpg.
If you want to load the image and check the image before placing it into your document:
var image = new Image();
image.onload = function() {
console.log("Height: " + image.height + ", Width: " + image.width);
}
image.src = "http://tes.jpl.nasa.gov/css/homeWelcome.png";
Related
Is there any way to determine width and height of gif image with JavaScript.
I have no google result of this.
Please let me solve the problem.
It's related to this post.
Getting Duration of Gif Image in JavaScript
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src ='your image path here';
I have an app where I am trying to stream images from a python app to the electron app. The streaming of the data is working now but every time I switch the image src to the new one that comes in, the whole window lags for a second or two before the image is updated. By lag I mean it freezes and is non-interactable.
The code when I change the image src loks like this:
static changeImageDisplay(imageData) {
if (!Camera.imageZoomHandler) {
let image = new Image();
image.id = "fodImageMainWindow";
Camera.currentImageSrc = "data:image/png;base64," + imageData.toString("base64");
image.src = Camera.currentImageSrc;
document.getElementById("fodImgContainer").appendChild(image);
image.addEventListener("dblclick", () => {
openCameraWindow(imageData);
});
Camera.imageZoomHandler = wheelzoom(image, {zoom: 0.2});
} else {
Camera.currentImageSrc = "data:image/png;base64," + imageData.toString("base64");
Camera.imageZoomHandler.style.backgroundImage = "url(" + Camera.currentImageSrc + ")";
}
// sendImageToWindow(imageData);
}
To be clear the lag is 100% happeneing on this line : image.src = Camera.currentImageSrc;
and this line: Camera.imageZoomHandler.style.backgroundImage = "url(" + Camera.currentImageSrc + ")"; . Also the image size that is coming in ~14mb
This question already has answers here:
Get image dimensions with Javascript before image has fully loaded
(3 answers)
Closed 6 years ago.
I tried to get the actual size of images before they are displayed on HTML, and I do use this in most cases:
var imgae = new Image();
image.src = img.src;
image.onload = function() {
// Do something with image.width and image.height
// and insert an <img> into <body>
}
However when the image is too large so that it may take seconds to download, users have to wait until it completes before seeing the image. Is there any way where I can get the information before Image.onload is triggered (and of cause after the meta data of image is loaded), so that I can show part of it on the page?
If you are using jQuery and you are requesting image sizes you have to wait until they load or you will only get zeroes.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
If you are using jQuery 3.0 remember that load method was removed, use
$('img').on('load', function() {})
var _URL = window.URL || window.webkitURL;
function displayPreview(files) {
var file = files[0]
var img = new Image();
var sizeKB = file.size / 1024;
img.onload = function() {
$('#preview').append(img);
alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
}
img.src = _URL.createObjectURL(file);
}
You can make your function asynchronous with simply using an appropriate callback:
function loadImages(imgsrc, callback) {
var image = new Image();
image.onload = callback;
image.src = imgsrc;
}
and then you can call this function easily like this
loadImages('you image src', function() {
// whatever code to be executed
});
Hope if works for you.
I'm working on an AJAX function that receives image URLs. However, I won't be using a node append to insert it. I'm using innerHTML, which makes it difficult to get the file dimensions.
At the moment, I'm using a function which is returning somewhat mixed results. Sometimes it gets the actual dimensions, other times it returns "0" as the image dimensions.
This is my function:
var url = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var width = getDimensions(url)[0];
var height = getDimensions(url)[1];
var insert = '<img src="'+url+'" width="'+width+'" height="'+height+'" />';
function getDimensions(path) {
var img = new Image();
img.src = path;
return [img.width, img.height];
}
Not sure why it's acting inconsistently though. Does anyone have any suggestions?
I was thinking it might be something to do with the AJAX inserting the image before it loads the dimensions, although not really sure.
Here's a fiddle, which seems to work as expected, but like I said, it's inconsistent.
http://jsfiddle.net/aH5re/1/
EDIT
Here is a second fiddle with a much larger image. I noticed it's a lot more inconsistent than a smaller image file
http://jsfiddle.net/aH5re/2/
You'll have to wait for the image to finish loading before you can get the dimensions properly and reliably. What's currently happening is that it's returning the dimensions before the image is potentially fully loaded. If you have it already cached you may be getting correct dimensions but on a large image uncached you're not going to get reliable results.
Have a look at this demo about how you could perhaps achieve that.
http://jsfiddle.net/robschmuecker/aH5re/5/
Javascript:
var url = "http://www.hdwallpapers.in/download/transformers_4_age_of_extinction-2560x1440.jpg";
var div = document.querySelector('div');
alert('loading image now');
var button = document.querySelector('.test');
getDimensions(url);
button.addEventListener('click', function () {
div.innerHTML = insert;
});
function getDimensions(path) {
var img = new Image();
img.src = path;
img.onload = function () {
alert('loaded');
var width = img.width;
var height = img.height;
insert = '<img src="' + url + '" width="' + width + '" height="' + height + '" />';
button.disabled = false
};
}
I have an image element with a spinner gif. I later dynamically change the src of that image with jQuery, and I want to get the actual width and height of the new image. Here is my code:
function loadImage() {
$('#uploaded-image').load(function() {
var img = document.getElementById('uploaded-image');
// These statements return the correct values in FF and Chrome but not IE
imgWidth = img.clientWidth;
imgHeight = img.clientHeight;
});
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl);
}
This works perfectly in Chrome and Firefox, but IE always returns the size of the original spinner gif instead of the new image.
How can I get the width and height of the new image in IE?
Notes:
I've tried the jQuery .width() and .height() methods in addition to the pure Javascript approach, with the same results.
The .load event is being fired as expected in all browsers.
Use offsetHeight and offsetWidth in IE.
Check this out in your IE: http://jsbin.com/abopih/5
var imgUrl = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
var img = document.getElementById('uploaded-image');
$('#uploaded-image').click(function() {
imgWidth = img.clientWidth;
imgHeight = img.clientHeight;
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl);
console.info('clientWidth: ', img.clientWidth);
console.info('clientHeight: ', img.clientHeight);
console.info('offsetWidth: ', img.offsetWidth);
console.info('offsetWidth: ', img.offsetWidth);
});
You could create a hidden div and place the image in there in order to get the size. Just make sure the hidden div isn't done with display:none, because then it will have no dimensions. Use visibility:hidden, grab the dimensions, and then remove it.
Make sure you remove css height and width as well:
$('#uploaded-image').css({ height: "auto", width: "auto" });
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file" />
<script type="text/javascript" charset="utf-8">
$("#file").change(function(e) {
var file, img;
file = document.getElementById("file");
if (file!=null) {
img = new Image();
img.src = file.value;
img.onload = function() {
alert(img.width + " " + img.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
}
});
</script>
It seems to be a cache problem.
Add this to your image source url:
imgUrl += new Date().getTime();