jquery_jquery를 기반으로 이미지 관련 작업(다시 그리기, 크기 가져오기, 크기 조정, 확대/축소) 구현

이 글에서는 참고할 수 있도록 일반적인 jquery 이미지 작업 4가지를 공유합니다.

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를 사용하여 이미지의 실제 크기를 얻는 방법

$(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
});

위 내용은 이미지 다시 그리기, 이미지 크기 조정, 이미지 크기 조정 및 이미지 크기 조정을 수행하는 데 도움이 되는 이 기사의 전체 내용입니다.