插件介绍
AlloyCrop是一款最小最好的移动端图片剪裁组件。AlloyCrop这个项目是8个月前发布的，作为AlloyFinger的典型案例，发布之后被BAT等其他公司广泛使用。
安装
可以通过npm来安装AlloyCrop组件。
npm install alloycrop |
使用方法
AlloyCrop组件需要CSS3 transform库transform.js和移动手势库AlloyFinger的支持。
<script src="transform.js"></script><script src="alloy-finger.js"></script><script src="alloy-crop.js"></script> |
API
new AlloyCrop({ image_src: "img src", circle: true, // optional parameters , the default value is false width: 200, // crop width height: 100, // crop height output: 2, // output resolution --> 400*200 ok: function (base64, canvas) { }, cancel: function () { }, ok_text: "yes", // optional parameters , the default value is ok cancel_text: "no" // optional parameters , the default value is cancel}); |
配置参数
| 参数 | 是否必填 | 描述 |
| image_src | 必须 | 需要裁剪图片的src地址 |
| circle | 不必须，默认是false | 代表选取的是否是圆形还是矩形，默认是矩形，注意:圆形选取裁剪出来的也是正方形图片 |
| width | 必须 | 选区的宽 |
| height | 必须 | 选区的高 |
| output | 必须 | 输出的倍率。比如如果output为2，选区的宽300，选区的高100，输出的图像的分辨率为 (2×300，2×100） |
| ok | 必须 | 点击ok按钮的回调 |
| cancel | 必须 | 点击cancel按钮的回调 |
| ok_text | 不必须，默认是ok | ok按钮的文本 |
| cancel_text | 不必须，默认是cancel | cancel按钮的文本 |
Github地址：https://github.com/AlloyTeam/AlloyCrop
