Image-related operations (re-painting, obtaining sizes, resizing, and scaling) are implemented based on jquery ),

Image-related operations (re-painting, obtaining sizes, resizing, and scaling) are implemented based on jquery ),

This article shares four common operations on jquery images for your reference. The specific content is as follows:

1. You can redraw the image size on the server or on the client using 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 method for obtaining the actual size of Images

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

3. jquery automatically adjusts the image size.

$ (Document ). ready (function () {$ ('img '). each (function () {var maxWidth = 500; // Maximum image width var maxHeight = 500; // maximum Image Height var ratio = 0; // zoom ratio var width = $ (this ). width (); // The actual width of the image var height = $ (this ). height (); // Actual Image height // check whether the image is too wide if (width> maxWidth) {ratio = maxWidth/width; // calculate the zoom ratio (this).css ("width ", maxWidth); // set the actual display width height = height * ratio; // calculate the scaled height (this).css ("height", height ); // set the height after proportional scaling} // check whether the image is super high if (height> maxHeight) {ratio = maxHeight/height; // calculate the zoom ratio (this%.css ("height ", maxHeight); // set the actual display height width = width * ratio; // calculate the scaled height (this).css ("width", width ); // set the height after proportional scaling }});});

4. Use jQuery to resize the image

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

The above is all the content in this article. It helps you achieve image re-painting, image size acquisition, image resizing, and image scaling.

Articles you may be interested in:

• Jquery image pre-loading auto proportional scaling plug-in
• Implement proportional image scaling plug-in using jquery
• Jquery-based code for Image Upload and image size verification and image Preview
• Switch the image size using replace string replacement in jQuery
• JQuery loads an image adaptive and fixed-size DIV
• JQuery achieves proportional scaling and allows large images to adapt to the page layout
• Jquery preview image to show the actual size with the mouse
• Use jQuery to verify the format and size of the uploaded Image
• How to dynamically modify the image size when jQuery loads a page