Javscript/jquery 获取图片宽高代码

2016-02-22    编辑:yx1990112     点击(
图片的高度与宽度除了可以使用php或者来获取之外我还可以直接使用js或jquery的函数来判断获取哦,下面整理了一些方法给大家参考参考。

一、简陋的获取图片方式

 代码如下 复制代码

// 图片地址 后面加时间戳是为了避免缓存
var img_url = '/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 打印
alert('width:'+img.width+',height:'+img.height);

执行:

宽高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化!

二、onload后在打印

 代码如下 复制代码
// 图片地址 后面加时间戳是为了避免缓存
var img_url = '/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
// 打印
alert('width:'+img.width+',height:'+img.height);
};

执行:

通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。所以有些人通过缓存获取也可以这么写。

三、通过complete与onload一起混合使用

为了测试缓存效果,注意以下测试图片的url都不加时间戳

 代码如下 复制代码

// 图片地址
var img_url = '/13643608813441.jpg';
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 判断是否有缓存
if(img.complete){
// 打印
alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
// 加载完成执行
img.onload = function(){
// 打印
alert('from:onload : width:'+img.width+',height:'+img.height);
};
}

jquery方式获取

前提是图片路径是正确的...

 代码如下 复制代码

var img = new Image();
img.src="http://www.baidu.com/img/baidu_sylogo1.gif";
img.onload = function(){
alert(this.width);
alert(this.height);
this.onload=null;
}

通过$("#img").attr("width");这种方式获取的值,有时候是不正确的

jquery还有另一种办法

 代码如下 复制代码

var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
});

看一个等比例缩放

 代码如下 复制代码

<script type="text/javascript">
function changeImg(objImg)
{
    var most = 690;        //设置最大宽度
    if(objImg.width > most)
    {
        var scaling = 1-(objImg.width-most)/objImg.width;   
        //计算缩小比例
        objImg.width = objImg.width*scaling;
        objImg.height = objImg.height;            //img元素没有设置高度时将自动等比例缩小
       
        //objImg.height = objImg.height*scaling;    //img元素设置高度时需进行等比例缩小
    }
   
}
</script>

HTML调用部分

<img src="" onload="changeImg(this);" />