Xác định kích thước tệp hình ảnh + kích thước qua Javascript?

Question

Là một phần của ứng dụng web, khi hình ảnh đã được tải xuống và hiển thị trên trang web, tôi cần xác định kích thước tệp của hình ảnh (kb) và độ phân giải trong ngữ cảnh trình duyệt (ví dụ: Điều này cần phải được thực hiện phía máy khách, rõ ràng là phải có khả năng giải quyết x-trình duyệt mà không cần điều khiển ActiveX hoặc Java applet (IE7 +, FF3 +, Safari 3+, IE6 tốt đẹp để có), mặc dù nó không phải là giải pháp tương tự cho mỗi trình duyệt.

Lý tưởng này sẽ được thực hiện bằng hệ thống Javascript, nhưng nếu tôi hoàn toàn cần một JQuery hoặc tương tự thư viện (hoặc một nhóm nhỏ nhỏ của nó), mà có thể được thực hiện.

Answer 1

Sửa:

Để có được hiện tại trong trình duyệt kích thước pixel của một phần tử DOM (trong trường hợp các yếu tố IMG của bạn) không bao gồm biên giới và lợi nhuận, bạn có thể sử dụng clientWidth và clientHeight tài sản.

var img = document.getElementById('imageId'); 

var width = img.clientWidth; 
var height = img.clientHeight; 

Bây giờ để có được kích thước tập tin, bây giờ tôi chỉ có thể nghĩ về fileSize property rằng Internet Explorer lộ cho tài liệu và các yếu tố IMG ...

Chỉnh sửa 2: Something nói đến cái tâm của tôi ..

Để nhận kích thước của tệp được lưu trữ trên máy chủ, bạn có thể chỉ cần thực hiện HEAD HTTP Request bằng Ajax. Loại yêu cầu này được sử dụng để thu được thông tin về url được ngụ ý bởi yêu cầu mà không chuyển bất kỳ nội dung nào của nó trong phản hồi.

Khi kết thúc Yêu cầu HTTP, chúng tôi có quyền truy cập vào tiêu đề HTTP phản hồi, bao gồm Content-Length đại diện cho kích thước của tệp theo byte.

Một ví dụ cơ bản sử dụng nguyên XHR:

var xhr = new XMLHttpRequest(); 
xhr.open('HEAD', 'img/test.jpg', true); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
    if (xhr.status == 200) { 
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length')); 
    } else { 
     alert('ERROR'); 
    } 
    } 
}; 
xhr.send(null); 

Lưu ý: Hãy nhớ rằng khi bạn làm yêu cầu Ajax, bạn bị hạn chế bởi các Same origin policy, cho phép bạn thực hiện các yêu cầu chỉ trong cùng một tên miền .

Kiểm tra bằng chứng làm việc về khái niệm here.

Sửa 3:

1.) Về Content-Length, tôi nghĩ rằng sự không phù hợp kích thước có thể xảy ra ví dụ nếu phản ứng máy chủ được gzip, bạn có thể làm một số xét nghiệm để xem nếu điều này xảy ra trên máy chủ của bạn.

2.) Đối với có được kích thước ban đầu của một hình ảnh, bạn có thể tạo ra một yếu tố IMG lập trình, ví dụ:

var img = document.createElement('img'); 

img.onload = function() { alert(img.width + ' x ' + img.height); }; 

img.src='http://sstatic.net/so/img/logo.png'; 

Answer 2

Bạn có thể lấy kích thước bằng cách sử dụng getElement(...).width và ...height.

Vì JavaScript không thể truy cập bất kỳ nội dung nào trên đĩa cục bộ vì lý do bảo mật, bạn không thể kiểm tra tệp cục bộ. Điều này cũng đúng đối với các tệp trong bộ nhớ cache của trình duyệt.

Bạn thực sự cần một máy chủ có thể xử lý các yêu cầu AJAX. Trên máy chủ đó, hãy cài đặt một dịch vụ tải xuống hình ảnh và lưu luồng dữ liệu vào đầu ra giả mà chỉ đếm các byte. Lưu ý rằng bạn không thể luôn dựa vào trường tiêu đề Content-length vì dữ liệu hình ảnh có thể được mã hóa. Nếu không, sẽ đủ để gửi yêu cầu HEAD HTTP.

Answer 3

Điều duy nhất bạn có thể làm là tải lên các hình ảnh đến một máy chủ và kiểm tra kích thước hình ảnh và kích thước sử dụng một số ngôn ngữ phía máy chủ như C#.

Chỉnh sửa:

Bạn không thể thực hiện chỉ bằng javascript.

Answer 4

Bạn có thể tìm kích thước của một hình ảnh trên trang bằng cách sử dụng một cái gì đó giống như

kích thước tập tin

document.getElementById('someImage').width 

, tuy nhiên, bạn sẽ phải sử dụng một cái gì đó server-side

Answer 5

var img = new Image(); 
img.src = sYourFilePath; 
var iSize = img.fileSize; 

Answer 6

Kiểm tra kích thước hình ảnh tải lên sử dụng Javascript

<script type="text/javascript"> 
    function check(){ 
     var imgpath=document.getElementById('imgfile'); 
     if (!imgpath.value==""){ 
     var img=imgpath.files[0].size; 
     var imgsize=img/1024; 
     alert(imgsize); 
     } 
    } 
</script> 

Mã Html

<form method="post" enctype="multipart/form-data" onsubmit="return check();"> 
<input type="file" name="imgfile" id="imgfile"><br><input type="submit"> 
</form> 

Answer 7

công nhân Dịch vụ được tiếp cận với tiêu đề thông tin, bao gồm cả Content-Length tiêu đề.

Nhân viên dịch vụ hơi phức tạp để hiểu, vì vậy tôi đã xây dựng một thư viện nhỏ có tên là sw-get-headers.

hơn bạn cần phải:

1. đăng ký sự kiện response của thư viện
2. xác định url của hình ảnh trong tất cả các mạng yêu cầu
3. đây bạn đi, bạn có thể đọc Content-Length tiêu đề!

Lưu ý rằng trang web của bạn cần phải được trên HTTPS sử dụng lao động dịch vụ, trình duyệt cần phải được tương thích với người lao động dịch vụ và những hình ảnh phải nằm trong cùng nguồn gốc như trang của bạn.

Answer 8

Hầu hết mọi người đã trả lời cách có thể biết kích thước của hình ảnh đã tải xuống vì vậy tôi sẽ cố gắng trả lời một phần khác của câu hỏi - biết kích thước tệp đã tải xuống của hình ảnh.

Bạn có thể thực hiện việc này bằng cách sử dụng api định thời tài nguyên. Đặc biệt các thuộc tính transferSize, encodedBodySize và decodedBodySize có thể được sử dụng cho mục đích này.

Kiểm tra câu trả lời của tôi ở đây để đoạn mã và biết thêm thông tin nếu bạn tìm kiếm: JavaScript - Get size in bytes from HTML img src

Answer 9

Làm thế nào về điều này:

var imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'; 
var blob = null; 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageUrl, true); 
xhr.responseType = 'blob'; 
xhr.onload = function() 
{ 
    blob = xhr.response; 
    console.log(blob, blob.size); 
} 
xhr.send(); 

http://qnimate.com/javascript-create-file-object-from-url/

do Cùng xứ Chính sách, chỉ có công việc dưới cùng một nguồn gốc

Answer 10

Lấy đồng xu gốc nsions của Hình ảnh

Nếu bạn cần lấy kích thước hình ảnh ban đầu (không phải trong ngữ cảnh trình duyệt). Vì lý do này, clientWidth và clientHeight thuộc tính không hoạt động vì nó trả về giá trị sai nếu hình ảnh được kéo dài/thu nhỏ qua css.

Để có được kích thước ban đầu, sử dụng naturalHeight và naturalWidth tài sản.

var img = document.getElementById('imageId'); 

var width = img.naturalWidth; 
var height = img.naturalHeight; 

p.s. Điều này không trả lời câu hỏi gốc khi câu trả lời được chấp nhận thực hiện công việc. Điều này, thay vào đó, phục vụ như bổ sung cho nó.