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

前端技术 2023/09/04 JavaScript

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

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

本文地址：https://www.stayed.cn/item/10011

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案