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

2019-11-20 10:55:54

字体：大中小

来源：转载

供稿：网友

本文为大家分享了四个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});

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

上一篇：jquery实现图片预加载

下一篇：使用堆实现Top K算法（JS实现）