js+jquery实现图片裁剪功能

这篇文章主要介绍了js+jquery实现图片裁剪功能的方法以及全部的示例代码,思路非常好,这里推荐给有需要的小伙伴。

现在我们在使用各大网站的个人中心时,都有个上传个人头像的功能。用户在上传了个人照片之后,可能不符合网站的要求,于是要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了,原来不懂js的时候,感觉很神奇,太神奇了。心想哪天要是自己也能搞明白这里面的技术,那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~

下面我们就来用javascript来实现这个功能吧。

复制代码 代码如下:


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


clip




 
使用方法

    

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


   

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


   

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


   

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




     

  •      

       

  •    

  •      

       





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

以上就是js+jquery实现图片裁剪功能的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程