腾讯AlloyTeam移动Web裁剪组件AlloyCrop正式开源

传送门

Github地址：github.com/AlloyTeam/A…

在线Demo演示:

简介

裁剪图片的应用场景有头像编辑、图像编辑，在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。AlloyCrop就是专一于裁剪图像的组件，目前服务于QQ相关的Web业务，今日正式对外开源。

项目截图

这里须要注意的是，圆形裁剪出的图片实际上是正方形的，这里能够经过CSS3圆角边框自行设置为圆形的图片。

使用姿式

new AlloyCrop({
        image_src: "img src",
        circle:true, // optional parameters , the default value is false
        width: 200,
        height: 200,
        ok: function (base64, canvas) { },
        cancel: function () { },
        ok_text: "确认", // optional parameters , the default value is ok
        cancel_text: "取消" // optional parameters , the default value is cancel
 });复制代码

• image_src为须要裁剪的图片的地址
• circle为裁剪组件的样式，为可选参数，默认值是false。须要注意：当设置为true时候,width必须等于height。
• width为裁剪区域的宽
• height为裁剪区域的高
• ok为点击确认按钮的回调函数，而且能够拿到裁剪完成的base64和裁剪所用的canvas
• cancel为点击取消按钮的回调函数
• ok_text为确认按钮的文本，可选。默认是 ok
• cancel_text为取消按钮的文本，可选。默认是 cancel

Q&A

Q: 对比了下微信的头像裁剪，为何基于Web的AlloyCrop比微信Native还要流畅？为何？为何？
A: 基于transformjs和AlloyFinger打造的AlloyCrop必须流畅啊！
这里猜想下（由于看不到微信裁剪的源码），微信头像裁剪走的是软绘，transformjs走的是硬绘。

Q: 兼容性如何
A: 支持touchstart、touchmove、touchend、touchcancel以及CSS3 transform的设备的浏览器即可运行AlloyCrop....不一一列举..

Q: transformjs+AlloyFinger+ AlloyCrop 一共不到600行？为何体积这么小？
A: 腾讯手Q内大量的web都会去不断地从各个维度进行性能优化。框架类库尺寸的大小就是其中很重要的一个维度，小文件明显加载更快，解析也更快，这是很直接的优化手段。100行代码能解决的问题绝对不会用1000行代码去解决。因此Hammerjs被咱们抛弃了，各类CSS3的js库也被咱们放弃。使用更加精简的、抽象层次更高的 transformjs和AlloyFinger。具体为什么如此小，能够看看源码。

Q: 腾讯内部有哪些项目在用?
A: 目前AlloyCrop主要是兴趣部落、QQ群等Web业务在用，刚刚开源出来，只要有裁剪图片的地方都会用到。AlloyFinger和transformjs拥有大量的项目在使用，包括公司外部的内部的以及国内的和国外的用户。

你值得拥有

Github地址：github.com/AlloyTeam/A…

欢迎使用！