js jquery implements image cropping function_jquery

Now when we use the personal center of major websites, we have a function to upload personal avatars. After the user uploads a personal photo, it may not meet the requirements of the website, so the user is asked to crop the photo, and finally an avatar is generated based on the user's cropped size. This function is really great. When I didn’t understand js, it felt amazing, so amazing. I thought that one day I could understand the technology inside, how awesome it would be~ Do you all have the same thoughts as me~ Haha~~

Let’s use javascript to implement this function.

Copy code The code is as follows:

http://www.w3.org/1999/xhtml">

 

使用方法

    

$("#container").clip({
  imgC : $("#imgC"),
        blockClass : "block",
        tipsClass  : "tips"       
 });

   

imgC : 表示裁剪图片的容器,也就是右边的图

   

blockClass : block的样式名  也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名  默认是block

   

tipsClass  : tips的样式名   也就是页面上显示left width height top的那个span的样式名 默认是tips

 
• 
       
  
     

   
• 
       
  
     

是不是很炫酷啊，小伙伴们，学学本示例的思路吧。