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

我需要在我的Web应用程序生成图像的缩略图。 我利用HTML 5 API的文件来生成缩略图。

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

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

我能够成功生成缩略图。 我的问题是我能够生成缩略图只能使用一个静态的大小。 有没有一种方式来获得所选择的文件的文件尺寸,然后创建Image对象?

--------------解决方案-------------

是的,阅读文件作为数据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

或使用对象网址:http://jsfiddle.net/8C4UB/

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

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

img.src = 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!");
}
}

分类:JavaScript的 时间:2015-03-14 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.729 (s). 10 q(s)