基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
本文为大家分享了四个jquery图片常见操作，供大家参考，具体内容如下
1、关于图片大小的重绘，你可以在服务端来实现，也可以通过JQuery在客户端实现。
$(window).bind("load",function(){
//IMAGERESIZE
$('#product_cat_listimg').each(function(){
varmaxWidth=120;
varmaxHeight=120;
varratio=0;
varwidth=$(this).width();
varheight=$(this).height();
if(width>maxWidth){
ratio=maxWidth/width;
$(this).css("width",maxWidth);
$(this).css("height",height*ratio);
height=height*ratio;
}
varwidth=$(this).width();
varheight=$(this).height();
if(height>maxHeight){
ratio=maxHeight/height;
$(this).css("height",maxHeight);
$(this).css("width",width*ratio);
width=width*ratio;
}
});
//$("#contentpageimg").show();
//IMAGERESIZE
});
2、jQuery获取<img>图片实际尺寸的方法
$(function(){
varimgSrc=$("#image").attr("src");
getImageWidth(imgSrc,function(w,h){
console.log({width:w,height:h});
});
});
functiongetImageWidth(url,callback){
varimg=newImage();
img.src=url;
//如果图片被缓存，则直接返回缓存数据
if(img.complete){
callback(img.width,img.height);
}else{
//完全加载完毕的事件
img.onload=function(){
callback(img.width,img.height);
}
}
}
3、jquery自动调整图片大小
$(document).ready(function(){
$('img').each(function(){
varmaxWidth=500;//图片最大宽度
varmaxHeight=500;//图片最大高度
varratio=0;//缩放比例
varwidth=$(this).width();//图片实际宽度
varheight=$(this).height();//图片实际高度//检查图片是否超宽
if(width>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对图片进行大小缩放
$(window).bind("load",function(){
//IMAGERESIZE
$('#product_cat_listimg').each(function(){
varmaxWidth=120;
varmaxHeight=120;
varratio=0;
varwidth=$(this).width();
varheight=$(this).height();
if(width>maxWidth){
ratio=maxWidth/width;
$(this).css("width",maxWidth);
$(this).css("height",height*ratio);
height=height*ratio;
}
varwidth=$(this).width();
varheight=$(this).height();
if(height>maxHeight){
ratio=maxHeight/height;
$(this).css("height",maxHeight);
$(this).css("width",width*ratio);
width=width*ratio;
}
});
//$("#contentpageimg").show();
//IMAGERESIZE
});
以上就是本文的全部内容，帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放，希望大家喜欢。