您的位置:首页 > 前端开发 > 技术笔记

js获取图片的原始尺寸

2018-10-15 09:06:02

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。

封装方法如下

//参数img为dom文档<img />元素对象
function getImgNatural(img, callback) {
    var nWidth, nHeight
    if (img.naturalWidth) { // 现代浏览器
        nWidth = img.naturalWidth;
        nHeight = img.naturalHeight;
        callback(nWidth, nHeight)
    } else { // IE6/7/8
        var imgae = new Image()
        image.src = img.src
        image.onload = function() {
            callback(image.width, image.height)
        }
    }
   
}

使用

//html
<img src="xxx.jpg" id="pic" />
//js
var img = $("#pic");
getImgNatural(img,function(width,height){
    console.log(width,height);
})


more 最近