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

本文为大家分享了四个jquery图片常见操作，供大家参考，具体内容如下
1、关于图片大小的重绘，你可以在服务端来实现，也可以通过JQuery在客户端实现。

$（window）.bind（"load", function（） { // IMAGE RESIZE $（"#product_cat_list img"）.each（function（） { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $（this）.width（）; var height = $（this）.height（）;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获取<img>图片实际尺寸的方法

$（function（）{ var imgSrc = $（"#image"）.attr（"src"）; getImageWidth（imgSrc,function（w,h）{ console.log（{width:w,height:h}）; }）;}）;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 自动调整图片大小

$（document）.ready（function（）{$（"img"）.each（function（） {var maxWidth =500; // 图片最大宽度var maxHeight =500;// 图片最大高度var ratio = 0; // 缩放比例var width = $（this）.width（）;// 图片实际宽度 var height = $（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（） {// IMAGE RESIZE$（"#product_cat_list img"）.each（function（） {var maxWidth = 120;var maxHeight = 120;var ratio = 0;var width = $（this）.width（）;var height = $（this）.height（）; 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}）;

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