JS - получить ширину и высоту изображения из кода base64

Ответы:

152 
var i = new Image(); 

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

i.src = imageData;
gp.
источник
1
просто потрясающе, на проверку размера уходит половина времени, большое вам спасибо!
напыщенный
9
очень плохо, что это асинхронный процесс.
Coen Damen
2
@CoenDamen ага. Мне тоже нужен синхронный процесс.
1,21 гигаватт
Ты потрясающий
Вальдриниум
13
Еще добавлю, что порядок здесь очень важен. Если вы сделаете это наоборот (src перед onload), вы можете пропустить событие. См .: stackoverflow.com/a/2342181/4826740
maxshuty
34

Для синхронного использования просто оберните его в обещание, подобное этому:

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

тогда вы можете использовать ожидание для получения данных в стиле синхронного кодирования:

var dimensions = await getImageDimensions(file)
Побег
источник
1
Хотя это все еще асинхронно. Просто используя синтаксический сахар.
gustavopch
NaturalWidth и naturalHeight - лучший выбор, не так ли? stackoverflow.com/questions/28167137/…
Crashalot
11

Я нашел это, используя .naturalWidthи .naturalHeightполучил наилучшие результаты.

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

Документы:

Это поддерживается только в современных браузерах. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Билл Келлер
источник
2

Создайте скрытый <img>с этим изображением, а затем используйте jquery .width () и. высота()

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

Протестируйте здесь: FIDDLE

Изображение изначально не создается скрытым. он создается, затем вы получаете ширину и высоту, а затем удаляете его. Это может привести к очень короткой видимости в больших изображениях, в этом случае вам нужно обернуть изображение в другой контейнер и сделать этот контейнер скрытым, а не само изображение.

Еще одна скрипка, которая не добавляет к dom в соответствии с anser gp.: ЗДЕСЬ

Desu
источник
var i = новое изображение (); i.src = imageData; setTimeout (function () {alert ("width:" + i.width + "height:" + i.height);}, 100);
gp.
это только исправление, необходимое из-за характера jsfiddle, вы можете изменить onLoad на onDomReady вместо этого, чтобы исправить эту начальную проблему ширины и высоты 0. Код предполагает, что вы вызываете эту функцию где-нибудь в своей работе, где документ уже загружен.
Desu
Думаю, ваша точка зрения заключалась в том, что вам не нужно ничего добавлять к dom, чтобы получить ширину и высоту. Изменим ответ, чтобы отразить ваши предложения.
Desu