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

Question

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

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

http:/www.html5rocks.comentutorialsfiledndfiles

我可以成功地生成缩略图。我的问题是，我只能通过使用静态尺寸来生成缩略图。是否有办法从选定的文件中获取文件尺寸，然后创建图像对象？

Answer 1

是的，读取文件作为一个数据URL，并将该数据URL传递给服务器。src 的 Image: http:/jsfiddle.netpimvdbeD2Ez2.

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.net8C4UB。

var url = URL.createObjectURL(this.files[0]);
var img = new Image;

img.onload = function() {
    alert(img.width);
    URL.revokeObjectURL(img.src);
};

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!");
    }
}