使用Javascript文件API获取图像尺寸

我需要在我的Web应用程序中生成一个图像的缩略图。 我利用Html 5 File API来生成缩略图。

我利用下面的URL中的例子来生成缩略图。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

我成功地能够生成缩略图。 我有的问题是我能够通过使用静态大小生成缩略图。 有没有办法从选定的文件中获取文件尺寸，然后创build图像对象？

Answer 1

是的，将该文件读取为数据URL并将该数据URL传递给Image的src ： http : //jsfiddle.net/pimvdb/eD2Ez/2/ 。

 var fr = new FileReader; fr.onload = function() { // file is loaded var img = new Image; img.onload = function() { alert(img.width); // image is loaded; sizes are available }; img.src = fr.result; // is the data URL because called with readAsDataURL }; fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating 

Answer 2

或者使用一个对象的URL： http : //jsfiddle.net/8C4UB/

 var url = URL.createObjectURL(this.files[0]); var img = new Image; img.onload = function() { alert(img.width); }; img.src = url; 

Answer 3

我在我的项目中将pimvdb答案包装在一个通用的函数中：

 function checkImageSize(image, minW, minH, maxW, maxH, cbOK, cbKO){ //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { var fr = new FileReader; fr.onload = function() { // file is loaded var img = new Image; img.onload = function() { // image is loaded; sizes are available if(img.width < minW || img.height < minH || img.width > maxW || img.height > maxH){ cbKO(); }else{ cbOK(); } }; img.src = fr.result; // is the data URL because called with readAsDataURL }; fr.readAsDataURL(image.files[0]); }else{ alert("Please upgrade your browser, because your current browser lacks some new features we need!"); } }