裁剪插件jCrop
为大家介绍个插件:jCrop。这个插件被我用在了多个项目中,如通过画热力图来查看某块地方用户的浏览数,放大缩小拖动选框来实时预览所选区域的图片病裁剪,设置头像是选框必须要是正方形,它有着丰富的配置参数和回调函数。
其常用的参数和回调方法在网上都可以找到,例如是否允许拖放,是否允许新选框,选框允许的大小、颜色、边界,禁用选框、销毁选框、重新调用选框等,使用起来非常方便。
使用方法是:
1.载入css
<link rel="stylesheet" href="jquery.Jcrop.css">
2.载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.Jcrop.js"></script>
3.给 IMG 标签加上 ID
<
img
id="element_id" src="pic.jpg">
4.调用 Jcrop
$('#element_id').Jcrop();
例如要想实现所选区域必须为正方形,则需要写上:
$('#element_id').Jcrop({ aspectRadio:1 });
令长宽比为1即可满足要求。