AlloyCrop

网站地址:https://alloyteam.github.io/AlloyCrop/

GitHub:https://github.com/AlloyTeam/AlloyCrop

描述信息:做最好且最小的移动裁剪组件

访问官网

GitHub

AlloyCrop 这个项目作为AlloyFinger 的典型案例，发布之后被BAT等其他公司广泛使用。但是发布之后，有两个问题一直没有抽出时间去解决:

裁剪图像的分辨率太小，是否可配？
pinch双指放大的时候，放大的中心不是双指中心，是否可以优化？

现在很高兴地告诉大家，AlloyCrop 已经完全搞定了上面两个问题，本文将解释新版本的变化和AlloyCrop背后的原理。

API

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按钮的文本