裁剪插件jCrop

Posted 2020-08-23 星星眨眼

为大家介绍个插件：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即可满足要求。