Implementation of picture-related operations based on jquery (redrawing, getting dimensions, resizing, scaling) _jquery

This article for you to share four jquery Pictures common operation, for your reference, the specific contents are as follows

1, about the picture size redraw, you can implement in the service side, also can through jquery in the client implementation.

$ (window). Bind ("Load", function () {
   //IMAGE RESIZE
   $ (' #product_cat_list img '). each (function () {
     var MaxWidth =;
     var maxheight =;
     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 get picture of the actual size of the method

$ (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 the picture is cached, the cached data is returned directly if
 (img.complete) {
   callback (img.width, img.height);
 } else{
      //Fully loaded event
   Img.onload = function () {
 callback (img.width, img.height);
 
}}}

3, jquery automatically adjust the size of the picture

$ (document). Ready (function () {
        $ (' img '). each (function () {  
        var maxwidth = 500;//Picture Max width  
        var maxheight = 500;  //Picture max height  
        var ratio = 0;//zoom ratio 
         var width = $ (this). width ();  Picture actual width  
         var = $ (this). Height ();///Picture actual height//   Check whether the picture is super wide  
         if (Width > maxwidth) {    
         ratio = Maxwidt H/width;  Calculate the zoom ratio    
         $ (this). CSS ("width", maxwidth);//Set actual display width    
         height = height * ratio;  Calculates the height of equal scale scaling    
         $ (this). CSS ("height", height);//Set proportional scaling height}//   Check whether the picture is super high 
          if (height > MaxHeight) {    
          ratio = maxheight/height//Calculate scale   
          $ (this). CSS ("height", maxheight);  Set the actual display height    
          width = width * ratio;  Calculates the height of the proportional scaling    
          $ (this). CSS ("width", width);  Set equal proportional scaling height  
          }});
      

4, use jquery to scale the picture size

$ (window). Bind ("Load", function () {
  //IMAGE RESIZE
  $ (' #product_cat_list img '). each (function () {
    var MaxWidth =;
    var maxheight =;
    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
});

The above is the entire content of this article, to help you realize the picture redraw, picture acquisition size, picture resizing and image scaling, I hope you like.