扫一扫分享
AlloyCrop 这个项目作为AlloyFinger 的典型案例,发布之后被BAT等其他公司广泛使用。但是发布之后,有两个问题一直没有抽出时间去解决:
现在很高兴地告诉大家,AlloyCrop 已经完全搞定了上面两个问题,本文将解释新版本的变化和AlloyCrop背后的原理。
new AlloyCrop({
image_src: "img src",
className: 'crop-box',
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地址 |
className | 不必须 | 裁剪 dom 容器的 class |
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按钮的文本 |
与之前版本最主要的变化就是新增了 output 支持自定义倍率分辨率的图像输出。
手机预览