JS - base64 kodundan resim genişliğini ve yüksekliğini alın

100

Burada bulabileceğiniz kodlanmış bir base64 img var . Yüksekliğini ve genişliğini nasıl öğrenebilirim?

— bomba gibi
kaynak

153

var i = new Image(); 

i.onload = function(){
 alert( i.width+", "+i.height );
};

i.src = imageData;

— gp.
kaynak

1

sadece harika, boyutu kontrol etmek yarım zaman alıyor, çok teşekkür ederim!

— bombastik

9

bunun eşzamansız bir süreç olması çok kötü.

— Coen Damen

2

@CoenDamen evet. Senkronize işleme de ihtiyacım var.

— 1.21 gigawatt

Harikasın

— Valdrinium

13

Buradaki sıranın çok önemli olduğunu da eklemek isterim. Bunu tam tersi şekilde yaparsanız (yüklemeden önce src) etkinliği kaçırabilirsiniz. Bakınız: stackoverflow.com/a/2342181/4826740

— maxshuty

35

Senkronize kullanım için, bunu şöyle bir söze sarın:

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
  })
}

veriyi eşzamanlı kodlama stilinde almak için await'i kullanabilirsiniz:

var dimensions = await getImageDimensions(file)

— EscapeNetscape
kaynak

1

Yine de eşzamansız. Sadece sözdizimsel şeker kullanıyorum.

— gustavopch

"naturalWidth" ve "naturalHeight" daha iyi seçenekler değil mi? stackoverflow.com/questions/28167137/…

— Crashalot

12

Bunu kullanarak buldum .naturalWidthve .naturalHeighten iyi sonuçları aldım .

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);
};

Dokümanlar:

Bu yalnızca modern tarayıcılarda desteklenir. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

— Bill Keller
kaynak

2

<img>Bu görüntüyle bir gizli oluşturun ve ardından jquery .width () ve. yükseklik()

$("body").append("<img id='hiddenImage' src='"+imageData+"' />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:"+width+" height:"+height);

Burada test edin: FIDDLE

Görüntü başlangıçta gizli olarak oluşturulmaz. yaratılır, sonra genişlik ve yükseklik elde edersiniz ve sonra onu kaldırırsınız. Bu, büyük görüntülerde çok kısa bir görünürlüğe neden olabilir, bu durumda görüntüyü başka bir kaba sarmanız ve bu kabı görüntünün kendisini değil, gizlemeniz gerekir.

Gp.'s anser'a göre dom'a eklenmeyen başka bir Fiddle: BURAYA

— Desu
kaynak

var i = yeni Resim (); i.src = imageData; setTimeout (function () {alert ("width:" + i.width + "height:" + i.height);}, 100);

— gp.

bu sadece jsfiddle'ın doğası gereği gerekli bir düzeltmedir, ilk 0 genişlik ve yükseklik sorununu düzeltmek için onLoad'u onDomReady olarak değiştirebilirsiniz. Kod, bu işlevi çalışmanızda belgenin zaten yüklü olduğu bir yerde çağırdığınızı varsayar.

— Desu

Sanırım amacınız, genişlik ve yükseklik elde etmek için dom'a herhangi bir şey eklemenize gerek olmamasıydı. Yanıtı önerilerinizi yansıtacak şekilde değiştirecektir.

— Desu