js获取img的原始高宽

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

 

 

function getImgNaturalDimensions(img, callback) {

    var nWidth, nHeight;

    if (img.naturalWidth) { // 现代 浏览器

        nWidth = img.naturalWidth;

        nHeight = img.naturalHeight;

    } else { // IE6/7/8

        var imgae = new Image();

        image.src = img.src;

        image.onload = function() {

            callback(image.width, image.height);

        }

    }

    return [nWidth, nHeight]

}

注意IE6/7/8的处理，创建了一个新的img，仅设置其src，这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的，可以传一个回调，回调里把原始的宽高作为参数传入。

如果只有图片的路径，则用法为：

function getImgNaturalDimensions(src, callback) {

    var nWidth, nHeight

   

    var imgae = new Image()

    image.src = img.src;

    image.onload = function() {

        callback(image.width, image.height);

    }

    return [nWidth, nHeight];

}