Implementieren Sie bildbezogene Vorgänge (Neuzeichnen, Größe abrufen, Größe ändern, Zoomen) basierend auf jquery_jquery

In diesem Artikel werden vier gängige JQuery-Bildoperationen als Referenz beschrieben. Der spezifische Inhalt lautet wie folgt:

1. Was das Neuzeichnen der Bildgröße betrifft, können Sie es auf der Serverseite oder auf der Clientseite über JQuery implementieren.

$(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. So ermitteln Sie die tatsächliche Größe des a1f02c36ba31691bcfe87b2722de723b-Bildes

$(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 passt die Bildgröße automatisch an

$(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. Verwenden Sie jQuery, um die Größe von Bildern zu ändern

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

Das Obige ist der gesamte Inhalt dieses Artikels, der Ihnen beim Neuzeichnen, Ändern der Bildgröße, Bildgrößenänderung und Bildskalierung helfen soll.