使用Javascript文件API获取图像维度

我需要在我的Web应用程序中生成图像的缩略图。我使用HTML5文件API生成缩略图

我利用下面URL中的示例生成缩略图

---

我成功地生成了缩略图。我的问题是，我只能使用静态大小生成缩略图。是否有方法从所选文件获取文件尺寸，然后创建图像对象？

是的，将文件作为数据URL读取，并将该数据URL传递给

图像的
src
：

var-fr=新文件读取器；
fr.onload=函数（）{//文件已加载
var img=新图像；
img.onload=函数（）{
警报（img.width）；//图像已加载；大小可用
};
img.src=fr.result；//是使用readAsDataURL调用的数据URL
};
fr.readAsDataURL（this.files[0]）；//我用的是一个用来演示的工具
或使用对象URL：

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

函数checkImageSize（image、minW、minH、maxW、maxH、cbOK、cbKO）{
//检查浏览器是否完全支持所有文件API
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
var fr=新文件读取器；
fr.onload=函数（）{//文件已加载
var img=新图像；
img.onload=function（）{//图像已加载；大小可用
如果（img.widthmaxW | | img.height>maxH）{
cbKO（）；
}否则{
cbOK（）；
}
};
img.src=fr.result；//是使用readAsDataURL调用的数据URL
};
fr.readAsDataURL（image.files[0]）；
}否则{
警告（“请升级您的浏览器，因为您当前的浏览器缺少我们需要的一些新功能！”）；
}
}    
现有的答案对我帮助很大。然而，由于
img.onload
事件导致的事件顺序奇怪，这让我觉得有些混乱。因此，我调整了现有的解决方案，并将其与基于承诺的方法相结合。也许这对其他人有帮助

下面是一个函数，它返回一个承诺，并将维度作为对象：

const getHeightAndWidthFromDataUrl=dataURL=>new Promise（解析=>{
常量img=新图像（）
img.onload=（）=>{
决心({
高度：img.height，
宽度：img.width
})
}
img.src=dataURL
})

以下是如何将其用于异步函数：

//从输入字段获取文件
const file=document.querySelector（'[type=“file”]'）。文件[0]
//以字符串形式获取图像的数据URL
const fileAsDataURL=window.URL.createObjectURL（文件）
//获取维度
const someFunction=async（）=>{
const dimensions=await getHeightAndWidthFromDataUrl（fileAsDataURL）
//对维度做点什么。。。
}

下面是如何使用
then（）
语法使用它：

//从输入字段获取文件
const file=document.querySelector（'[type=“file”]'）。文件[0]
//以字符串形式获取图像的数据URL
const fileAsDataURL=window.URL.createObjectURL（文件）
//获取尺寸
getHeightAndWidthFromDataUrl（fileAsDataURL）。然后（维度=>{
//用尺寸做点什么
})
这种方法不会将图像加载到内存中。readAsDataURL确实如此。通常，最好在
onload
处理程序中撤销url:
url.revokeObjectURL（url）
。有用链接：
img.onload=function（）{
never triggersdo
img.src=fr.result；
before
img.onload
img.onload
是
Image
上的
onload
事件的处理程序，只有在加载了某个对象之后才会调用它。在这种情况下，
img.src=fr.result；
将触发
onload
事件。从语义上讲，您可以希望在事件可能触发之前绑定事件处理程序。如果未触发
onload
，请尝试
img.onerror=function（err）{console.error（err）；}
以查看文件读取器是否未能加载
图像
可以处理的内容。（或者是否出现其他错误）我在网上找到的唯一相关答案。非常感谢您，先生ヽ(￣д￣)ノ
var url = URL.createObjectURL(this.files[0]);
var img = new Image;

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

img.src = url;

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