JS - отримати ширину та висоту зображення із коду base64

91

У мене є закодований img base64, який ви можете знайти тут . Як я можу отримати його висоту та ширину?

146

var i = new Image(); 

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

i.src = imageData;

— gp.
джерело

просто приголомшливо, перевірка розміру займає половину часу, велике спасибі!

— бомбастичний

5

Шкода, що це асинхронний процес.

— Коен Дамен,

@CoenDamen так. Мені також потрібен синхронний процес.

— 1,21 гігават

Ти чудовий

— Вальдрініум

12

Я б також додав, що порядок тут дуже важливий. Якщо ви зробите це навпаки (src перед завантаженням), ви можете пропустити подію. Дивіться: 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
  })
}

тоді ви можете використовувати await для отримання даних у стилі синхронного кодування:

var dimensions = await getImageDimensions(file)

— EscapeNetscape
джерело

1

Це все ще асинхронно. Просто використовуючи синтаксичний цукор.

— gustavopch

"naturalWidth" і "naturalHeight" - кращий вибір? stackoverflow.com/questions/28167137 / ...

— Crashalot

6

Я виявив, що використання .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.: ТУТ

— Дезу
джерело

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

— gp.

це лише виправлення, необхідне через природу jsfiddle, ви можете замінити onLoad на onDomReady, щоб замінити цю початкову проблему ширини та висоти 0. Код передбачає, що ви викликаєте цю функцію десь у своїй роботі, де документ вже завантажений.

— Desu

Здогадуєтесь, ваш сенс полягав у тому, що вам не потрібно нічого додавати до dom, щоб отримати ширину та висоту. Змінить відповідь, щоб відобразити ваші пропозиції.

— Desu