Automatic scaling and cropping of images based on JQuery

Automatic scaling and cropping of images based on JQuery_jquery

WBOY

Release： 2016-05-16 17:01:46

Original

993 people have browsed it

In fact, I have wanted to write an effect like this for a long time. As for the reason? Come in with this note, I believe you understand.
General portal websites are indispensable for displaying a large number of pictures. In order to make the website beautiful, the pictures come in various sizes. Professional website editors will process the pictures into equal proportions and then upload them, making the website very beautiful. It looks good, but unfortunately, I would say that 90% of the website editors I encounter are unprofessional.
In order to prevent the website editors from ruining my hard work, I decided to do something like this.

1. First, define the size of the image in CSS. If JS is not executed, you can see the stretched image, which is the most normal performance;
2. For each CSS that defines the image size Define an additional container that is not commonly used. Here I choose the italic tag , and define its CSS to be exactly the same as the CSS of the same root img, and define the CSS style of the img in the container to return margin:0; padding:0;
This is what I did:

Copy code The code is as follows:

/*Public*/
cite{display: block;overflow:hidden;overflow:hidden !important;}

/*a container*/
#BigPic img{display:block;padding:2px;width:240px;height:160px;border: 1px solid #cccccc;}
#BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;}
#BigPic cite img{display:block;margin :0px;padding:0px;border:none;}

3. Define the image processing function, refer to the defined size and original size of the image, fill the position while maintaining the proportion, and then put it into the cropping container;
My code:

Copy code The code is as follows:

//Image size judgment and processing, surrounded by cropping container - By COoL
function cutImgz(obj){
 var image=new Image();
 image.src=obj.src;

 $this=$(obj);
 var iwidth=$this.width();//Get the image display width fixed in CSS
 var iheight=$this.height();//Get the image display height fixed in CSS
 if (1*image.width*iheight!=1*iwidth*image.height){
                                                                               using using using use using                                                           ‐                           out out out out out out out through out through out through through off     ’ s ’ through ’ s right through through out through out through out's' through out through out ‐ through‐to‐‐‐‐‐‐ light, to 1*image.width*iheight!=1*iwidth*image.height_to/ image.height>=iwidth/iheight){
                                                                                                                                                                                                              >                                                                                                                                                                                                                                                                     $this.width(iwidth 'px');           }

 //Use cite to create a cropping effect
 $this.wrap('');
}
}




4. When loading the page, traverse all the images to determine whether they are in the cache. If they are in the cache, they will be processed directly. If they are not in the cache, they will be processed by onload. 
 (
 Because the cached images are processed within seconds load, it has been loaded before the onload event is defined, causing the onload event not to be triggered; if the image is not in the cache, if it is processed directly, the image is not loaded, and the original size will be regarded as an empty image by the Image object, and the width and height are both 0
)
My code:

Copy code

The code is as follows:

$('img').each(function() { var image=new Image(); image.src=this.src; if(image.complete){ //Exist in cache and process immediately

cutImgz(this ; });