调整大小后获取实际图像大小 [英] Get actual image size, after resizing it

问题描述

我有一个用缩略图填充的页面，用css调整大小到 150x150 ，当我点击缩略图时，页面变暗，图像显示在其中真实尺寸。

I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it's true sizes.

目前，我必须手动创建一个包含所有图像实际高度的数组。为了解决设计问题+减少我的图库的手动操作，我需要在调整它（CSS）之后获得图像的实际高度。

Currently, I have to manually create an array that includes the actual height of all images. For solving a design issue+less manual operation of my gallery, I need to get the actual height of an image, after I resized it (CSS).

我试过：

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

并且：

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

但两者都返回指定的 150px 属性CSS。我怎么解决这个问题？谢谢

But both return the 150px attribute assigned with the CSS. How can I solve this? Thanks

推荐答案

你可以做的一种方法是创建一个单独的图像对象。

One way you could do it is create a separate image object.

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请求。

That way, you'll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.

这篇关于调整大小后获取实际图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！