JS - lấy chiều rộng và chiều cao hình ảnh từ mã base64

Question

Tôi có một số base64 img encoded mà bạn có thể tìm thấy here. Làm thế nào tôi có thể nhận được chiều cao và chiều rộng của nó?

Answer 1

var i = new Image(); 

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

i.src = imageData; 

Answer 2

Tạo ẩn <img> bằng hình ảnh đó và sau đó sử dụng jquery .width() và. chiều cao()

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

Kiểm tra ở đây: FIDDLE

hình ảnh không tạo ra ban đầu ẩn. nó được tạo ra, sau đó bạn nhận được chiều rộng và chiều cao và sau đó loại bỏ nó. Điều này có thể gây ra khả năng hiển thị rất ngắn trong các hình ảnh lớn trong trường hợp này, bạn phải bọc hình ảnh trong một vùng chứa khác và làm cho vùng chứa đó ẩn không phải hình ảnh.

---

Một Fiddle mà không thêm vào dom theo Anser gp của:. HERE

Answer 3

tôi thấy rằng việc sử dụng .naturalWidth và .naturalHeight có kết quả tốt nhất.

var img = new Image(); 

img.onload = function() { 
    var imgWidth = img.naturalWidth, 
     imgHeight = img.naturalHeight; 
}; 

Điều này chỉ được hỗ trợ trong trình duyệt hiện đại. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

Để sử dụng đồng bộ chỉ cần quấn nó thành một lời hứa như thế này:

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

sau đó bạn có thể sử dụng đang chờ đợi để có được các dữ liệu trong đồng bộ kiểu mã hóa:

var dimensions = await getImageDimensions(file)