调整大小后获取实际图像大小

Question

我有一个填充缩略图的页面,用css调整大小150x150,当我点击缩略图时,页面变暗,并且图像显示为真实尺寸.

目前,我必须手动创建一个包含所有图像的实际高度的数组.为了解决设计问题+减少我的图库的手动操作,我需要在调整大小(CSS)后获得图像的实际高度.

我试过了:

var imageheight = document.getElementById(imageid).height;

和:

var imageheight = $('#' + imageid).height();

但两者都返回150pxCSS分配的属性.我怎么解决这个问题？谢谢

Answer 1

你有'自然'的kws来帮助你:

与js:

var imageheight = document.getElementById(imageid).naturalHeight;

或者使用jquery

var imageheight = $('#' + imageid).naturalHeight;

Answer 2

您可以这样做的一种方法是创建一个单独的图像对象.

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

这样,您将使用相同的图像,但不会使用DOM上的图像,它具有已修改的尺寸.据我所知,缓存的图像将使用此方法进行回收.所以不用担心额外的HTTP请求.