I've always thought that the front end can only read the width and height of the picture, as well as the size of the locally uploaded image (via FileReader), but not the size of the remote picture.
Yesterday when the search suddenly realized that the HTTP headers contains Content-Length
parameters, this is not the size of it?! And then immediately in the console input $.get(src, function(data, statusText, res){res.getAllResponseHeaders()})
, this is not done!
But I'm glad it's too early. Put this in the code, Leng not show Content-Length
!
And then continue to analyze the output, hey, **data** is not the picture? Its length is not the original size of the picture?!
Yes, that's the way the code looks:
var img = new Image();img.onlod = function() { // 先获取长度和宽度(像素) $.ajax({ // 再获取图片大小(kb) url: src, type: ‘GET‘, processData: false, complete: function(xhr, statusText) { console.log(img.width, img.height, xhr.status === 200 ?(xhr.responseText.length/1024).toFixed(2) : 0); } });};img.src = src;
http://my.oschina.net/u/2324376/blog/416890
Web-side get the size and size of remote pictures