[Jquery,JavaScript] how to determine the size (in kb) pictures / images?

ProFTP

ProFTP

how to determine the size (in kb) pictures / images?

size width and length of work:
Code: 
		var newImg = new Image();
		var height, width;

		newImg.onload = function() {
    	height = newImg.height;
    	width = newImg.width;

		};

		newImg.src = 'file://localhost/usr/home2/di/11/p/29/1.jpg'; 

   	var height = newImg.height;
    	var width = newImg.width;

    	var size = newImg.size;
  	

					
    alert ('The image size is '+size+'*'+height);					
					
		  $(".info").html( " "+width+" x "+height+", "+size+" Кбайт ");


and how to determine precisely the size of the picture in the kb?

seemingly CSS DOM keeps this ...?

very desirable to determine the size of Javascript ...
 
works:

Code: 
		var newImg = new Image();
		var height, width;

		newImg.onload = function() {
    	height = newImg.height;
    	width = newImg.width;

		};

	newImg.src = 'http://x0.org.ua/test/p/29/1.jpg'; 


function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
}


   	var height = newImg.height;
    	var width = newImg.width;		
    	

   var size_image = getImageSizeInBytes('http://x0.org.ua/test/p/29/1.jpg');

 size_image = size_image / 1000; 


//	alert(getImageSizeInBytes('http://x0.org.ua/test/p/29/1.jpg'));				
					
//    alert ('The image size is '+size+'*'+height);					
					


		  $(".info").html( " "+width+" x "+height+", "+size_image+"  kb ");




I wish to add in the Open source gallery, here's her site http://www.twospy.com/galleriffic


http://x0.org.ua/gallery_test/index.html
and help protestirvoat on different browsers?

in my buggy, it often for some reason or not?

Please click a few times (3-6 times) on the thumbs and the big picture ... OK, right? seen whether the resolution and size always?
 
but you are doing ajax request on each photo to know it is size (if there is not good caching there ) you get the image two times .
if you want you can calculate image size on server side and send back with image link
Code: 
[{size : '30' , name : 'flowers' , link : '/a/s.jpg' } ,{size : '30' , name : 'flowers2' , link : '/a/s.jpg' } ]
then you can add more info
or your galary item can hold these info :
Code: 
<img class="size_20"  href="a/do.jpg" />
you can use title instead of class this will case the the browser to pop the image with info
if you want great tools for all of this use "jquery tools" small and have rish api
 
but look at this gallery http://x0.org.ua/gallery_test/index.html is not working properly on different browsers on different buggy??



darkshadow said:
but you are doing ajax request on each photo to know it is size (if there is not good caching there ) you get the image two times .
if you want you can calculate image size on server side and send back with image link
Code: 
[{size : '30' , name : 'flowers' , link : '/a/s.jpg' } ,{size : '30' , name : 'flowers2' , link : '/a/s.jpg' } ]
Click to expand...





yes, good will implement ...


======

but now in my gallery fail badly, try on different browsers??

opera9:
Code: 
462 x 600, NaN Кбайт

firefox3.0
Code: 
462 x 600, 126.792 Кбайт
etc
 
You must log in or register to reply here.
Back
Top