JS - dapatkan lebar dan tinggi gambar dari kode base64

Saya memiliki encode base64 img yang dapat Anda temukan di sini . Bagaimana saya bisa mendapatkan tinggi dan lebarnya?

var i = new Image(); 

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

i.src = imageData; 

Untuk penggunaan sinkron, cukup gabungkan menjadi janji seperti ini:

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

lalu Anda dapat menggunakan await untuk mendapatkan data dalam gaya pengkodean sinkron:

var dimensions = await getImageDimensions(file)

Saya menemukan bahwa menggunakan .naturalWidthdan .naturalHeightmemiliki hasil terbaik.

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

Dokumen:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

Ini hanya didukung di browser modern. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Buat hidden <img>dengan gambar itu lalu gunakan jquery .width () dan. tinggi()

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

Uji di sini: FIDDLE

Gambar awalnya tidak dibuat tersembunyi. itu dibuat, lalu Anda mendapatkan lebar dan tinggi dan kemudian menghapusnya. Hal ini dapat menyebabkan visibilitas yang sangat pendek pada gambar besar, dalam hal ini Anda harus membungkus gambar di penampung lain dan menyembunyikan penampung tersebut, bukan gambar itu sendiri.

Fiddle lain yang tidak menambah dom sesuai anser gp.: DI SINI