用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的.
在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃.
在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用.
官方网址:http://deepliquid.com/content/Jcrop.html
上面有很多demo,有兴趣的可以上去看看.
此文章中,封装的JS如下:
[url=css/jquery.Jcrop.css]<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/jQuery.UtrialAvatarCutter.js"></script>
2. 定义原始图片与缩略图的容器
代码
<!--
原始图
-->
<div id="picture_original">
<img src="http://static.youhuiduo.net/Attatchment/72383/600X600/634030306987187500.jpg"/>
</div>
<!---
缩略图
-->
<div id="picture_200"></div>
<div id="picture_50"></div>
<div id="picture_30"></div>
3. 配置
代码
[url=http://www.1sucai.cn/jiaoben/24767.html]http://www.1sucai.cn/jiaoben/24767.html[/url]