获取图片的原始尺寸
- 老旧浏览器
function getNaturalSize(img) {
var image = new Image();
var naturalSize = {};
image.src = img.src;
naturalSize.width = image.width;
naturalSize.height = image.height;
return naturalSize
}
var img = document.getElementsByTagName(‘img‘)[0]
getNaturalSize(img); // 返回原始尺寸分析： 新建一个 image 对象，将当前图片的 src 赋值给 image.src, 此时 image 会发起网络请求从网络下载该图片。此时 image 的宽高就是所求图片的原始尺寸。
- html5：
htlm 5 提供了一个直接获取图片原始宽高的 API —— naturalWidth / naturalHeight:
function getNaturalSize(img) {
var naturalSize = {};
naturalSize.width = img.naturalWidth;
naturalSize.height = img.naturalHeight;
return naturalSize;
}
var img = document.getElementsByTagName(‘img‘)[0]
getNaturalSize(img); // 返回原始尺寸兼容 ie 6/7/8 和现代浏览器的写法：
function getNaturalSize(img, callback) {
var naturalSize = {};
if (img.naturalWidth) {
naturalSize.width = img.naturalWidth;
naturalSize.height = img.naturalHeight;
callback(naturalSize);
} else {
var image = new Image();
image.onload = function () {
naturalSize.width = image.width;
naturalSize.height = image.height;
callback(naturalSize);
}
image.src = img.src;
}
}
var img = document.getElementsByTagName(‘img‘)[0]
getNaturalSize(img, function (dimensions) {
// 图片处理代码
});判断图片是否加载完成
- onload 事件
- onreadyStatechange 事件
- complate 属性
