I have a Base64 image encoded that you can find here. How can I get the height and the width of it?
-
5Link rot has set in for this questionLuke– Luke2022-01-10 12:35:00 +00:00Commented Jan 10, 2022 at 12:35
-
Yep. "Hmm. We’re having trouble finding that site. We can’t connect to the server at soo.gd."Peter Mortensen– Peter Mortensen2023-01-31 02:56:14 +00:00Commented Jan 31, 2023 at 2:56
Add a comment
|
6 Answers
var i = new Image();
i.onload = function(){
alert(i.width + ", " + i.height);
};
i.src = imageData;
8 Comments
Coen Damen
too bad that this is an asynchronous process.
1.21 gigawatts
@CoenDamen yep. I need synchronous process as well.
maxshuty
I would also add that the order here is very important. If you do this the other way around (src before onload) you may miss the event. See: stackoverflow.com/a/2342181/4826740
canbax
can't we do it without loading the image from the string ?
Luke
imageData should be in the format data:image/png;base64, then the base 64 image data. |
For synchronous use just wrap it into a promise like this:
function getImageDimensions(file) {
return new Promise (function (resolved, rejected) {
var i = new Image()
i.onload = function(){
resolved({w: i.width, h: i.height})
};
i.src = file
})
}
then you can use await to get the data in synchronous coding style:
var dimensions = await getImageDimensions(file)
2 Comments
gustavopch
It's still asynchronous though. Just using syntactic sugar.
Crashalot
'naturalWidth' and 'naturalHeight` are the better choices no? stackoverflow.com/questions/28167137/…
I found that using .naturalWidth and .naturalHeight had the best results.
const img = new Image();
img.src = 'https://via.placeholder.com/350x150';
img.onload = function() {
const imgWidth = img.naturalWidth;
const imgHeight = img.naturalHeight;
console.log('imgWidth: ', imgWidth);
console.log('imgHeight: ', imgHeight);
};Documentation:
This is only supported in modern browsers. NaturalWidth and NaturalHeight in IE
1 Comment
Steve
Exactly, it is the original size of image before being resized by
object-fitA more modern solution is to use HTMLImageElement.decode() instead of the onload event. decode() returns a promise and thus can be used synchronously with await.
Asynchronous use:
let img = new Image();
img.src = "myImage.png";
img.decode().then(() => {
let width = img.width;
let height = img.height;
// Do something with dimensions
});
Synchronous use (inside an async function):
let img = new Image();
img.src = "myImage.png";
await img.decode();
let width = img.width;
let height = img.height;
// Do something with dimensions
2 Comments
Wilt
Awesome answer, learned something new today.
Advena
Similarly to @gustavopch's comment, this is not synchronous. You'd still need to use it with
async. Synchronous is without any of async/await or .then().Create a hidden <img> with that image and then use jQuery's .width() and . height()
$("body").append("<img id='hiddenImage' src='" + imageData + "' />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:" + width + " height:" + height);
Test here: JSFiddle
The image is not initially created hidden. It gets created, and then you get width and height and then remove it. This may cause a very short visibility in large images. In this case, you have to wrap the image in another container and make that container hidden, not the image itself.
Another Fiddle that does not add to the DOM as per gp.'s answer: here
3 Comments
gp.
var i = new Image(); i.src = imageData; setTimeout(function(){ alert ( "width:"+ i.width+" height:" + i.height ); },100);
Desu
this is only a fix needed because of the nature of the jsfiddle, you can change onLoad to onDomReady instead to fix that initial 0 width and height problem. Code assumes you call this function somewhere in your work where document is already loaded.
Desu
Guess your point being was, that you do not need to add anything to dom to get width and height. Will modify answer to reflect your suggestions.
const img = new Image();
img.src = dataUrl;
await img.decode();
const width, height = img.width, img.height;
