JS - dapatkan lebar dan tinggi gambar dari kode base64


Jawaban:


152
var i = new Image(); 

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

i.src = imageData; 

1
luar biasa, perlu setengah waktu untuk memeriksa ukuran, terima kasih banyak!
bombastis

9
sayang sekali ini adalah proses asynchronous.
Coen Damen

2
@Pengen Saya perlu proses sinkron juga.
1,21 gigawatt

Anda luar biasa
Valdrinium

13
Saya juga menambahkan bahwa urutan di sini sangat penting. Jika Anda melakukan ini sebaliknya (src sebelum onload) Anda mungkin melewatkan acara tersebut. Lihat: stackoverflow.com/a/2342181/4826740
maxshuty

34

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)

1
Ini masih asinkron. Hanya menggunakan gula sintaksis.
gustavopch

'naturalWidth' dan 'naturalHeight` adalah pilihan yang lebih baik, bukan? stackoverflow.com/questions/28167137/…
Crashalot

11

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:

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


2

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


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

ini hanya perbaikan yang diperlukan karena sifat dari jsfiddle, Anda dapat mengubah onLoad menjadi onDomReady sebagai gantinya untuk memperbaiki masalah awal 0 lebar dan tinggi. Kode mengasumsikan Anda memanggil fungsi ini di suatu tempat dalam pekerjaan Anda di mana dokumen sudah dimuat.
Desu

Tebak maksud Anda adalah, bahwa Anda tidak perlu menambahkan apapun ke dom untuk mendapatkan lebar dan tinggi. Akan mengubah jawaban untuk mencerminkan saran Anda.
Desu
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.