简介

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

传送门

Github地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop

在线Demo演示:

项目截图

这里需要注意的是,圆形裁剪出的图片其实是正方形的,这里可以通过CSS3圆角边框自行设置为圆形的图片。

使用姿势

  • 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: 基于transformjsAlloyFinger打造的AlloyCrop必须流畅啊!
这里猜测下(因为看不到微信裁剪的源码),微信头像裁剪走的是软绘,transformjs走的是硬绘。

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

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

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

你值得拥有

Github地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop

欢迎使用!

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/11/tencent-alloyteam-alloycrop-official-mobile-web-clipping-components-open-source/

  1. Mingjun 2017 年 4 月 5 日

    微信网页开发,利用用微信JSSDK chooseImage 返回的 localIds 来裁剪图像,裁剪完成后
    this.ok(this.canvas.toDataURL(“image/” + this.type), this.canvas) 这一步在安卓机上 toDataURL() 方法不返回 base64

  2. 朱雀 2016 年 12 月 18 日

    输出的图片能够保存图片的原像素级别吗?好像不行

    • TAT.dnt

      TAT.dnt 2016 年 12 月 20 日

      输出base64

    • Mingjun 2017 年 4 月 5 日

      在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

  3. 朱雀 2016 年 12 月 17 日

    能输出image吗

  4. 随风飘扬 2016 年 11 月 22 日

    不错,支持!

  5. 李孟君 2016 年 11 月 22 日

    这个crop只做裁剪,后续的上传工作是自己实现么?

    • TAT.dnt

      TAT.dnt 2016 年 11 月 22 日

      对。提供个base64 upload的接口~~

  6. wings 2016 年 11 月 22 日

    666

  7. 柴晓鹏 2016 年 11 月 21 日

    真好,感谢!

发表评论