使用 Javascript File API 获取图像尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7460272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting Image Dimensions using Javascript File API
提问by Abishek
I require to generate a thumbnail of an image in my Web Application. I make use of the Html 5 File API to generate the thumbnail.
我需要在我的 Web 应用程序中生成图像的缩略图。我使用 Html 5 File API 来生成缩略图。
I made use of the examples from the below URL to generate the thumbnails.
我利用以下 URL 中的示例来生成缩略图。
http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://www.html5rocks.com/en/tutorials/file/dndfiles/
I am successfully able to generate the thumbnails. The problem that I have is I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object?
我能够成功生成缩略图。我遇到的问题是我只能通过使用静态大小来生成缩略图。有没有办法从所选文件中获取文件尺寸，然后创建 Image 对象？
回答by pimvdb
Yes, read the file as a data URL and pass that data URL to the srcof an Image: http://jsfiddle.net/pimvdb/eD2Ez/2/.
是的，阅读文件作为数据URL和传递数据的URL到src的Image：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
回答by letmaik
Or use an object URL: http://jsfiddle.net/8C4UB/
或者使用一个对象 URL：http: //jsfiddle.net/8C4UB/
var url = URL.createObjectURL(this.files[0]);
var img = new Image;
img.onload = function() {
alert(img.width);
URL.revokeObjectURL(img.src);
};
img.src = url;
回答by Necrontyr
I have wrapped pimvdb answer in a function for general purpose in my project:
我在我的项目中将 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!");
}
}
