基于jquery实现图片相关操作重绘、获取尺寸、调整大小、缩放

本文为大家分享了四个jquery图片常见操作，供大家参考，具体内容如下

1、关于图片大小的重绘，你可以在服务端来实现，也可以通过JQuery在客户端实现。

if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width",maxWidth); $(this).css("height",height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height",maxHeight); $(this).css("width",width * ratio); width = width * ratio; }

});
//$("#contentpage img").show();
// IMAGE RESIZE
});

2、jQuery获取图片实际尺寸的方法

function getImageWidth(url,callback){
var img = new Image();
img.src = url;

// 如果图片被缓存，则直接返回缓存数据
if(img.complete){
callback(img.width,img.height);
}else{
// 完全加载完毕的事件
img.onload = function(){
callback(img.width,img.height);
}
}

}

3、jquery 自动调整图片大小

maxWidth){ ratio = maxWidth / width; // 计算缩放比例 $(this).css("width",maxWidth); // 设定实际显示宽度 height = height * ratio; // 计算等比例缩放后的高度 $(this).css("height",height); // 设定等比例缩放后的高度 } // 检查图片是否超高 if(height > maxHeight){ ratio = maxHeight / height; // 计算缩放比例 $(this).css("height",maxHeight); // 设定实际显示高度 width = width * ratio; // 计算等比例缩放后的高度 $(this).css("width",width); // 设定等比例缩放后的高度 }}); });

4、使用jQuery对图片进行大小缩放

if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width",height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height",width * ratio); width = width * ratio; }

});
//$("#contentpage img").show();
// IMAGE RESIZE
});

以上就是本文的全部内容，帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放，希望大家喜欢。