传送门

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

在线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: 基于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移动Web裁剪组件AlloyCrop正式开源的更多相关文章

  1. 腾讯万亿级分布式消息中间件TubeMQ正式开源

    TubeMQ是腾讯在2013年自研的分布式消息中间件系统,专注服务大数据场景下海量数据的高性能存储和传输,经过近7年上万亿的海量数据沉淀,目前日均接入量超过25万亿条.较之于众多明星的开源MQ组件,T ...

  2. Kubernetes 弹性伸缩全场景解读(五) - 定时伸缩组件发布与开源

    作者| 阿里云容器技术专家刘中巍(莫源) 导读:Kubernetes弹性伸缩系列文章为读者一一解析了各个弹性伸缩组件的相关原理和用法.本篇文章中,阿里云容器技术专家莫源将为你带来定时伸缩组件  kub ...

  3. 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析

    AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...

  4. 升讯威ADO.NET增强组件(源码):送给喜欢原生ADO.NET的你

    目前我们所接触到的许多项目开发,大多数都应用了 ORM 技术来实现与数据库的交互,ORM 虽然有诸多好处,但是在实际工作中,特别是在大型项目开发中,容易发现 ORM 存在一些缺点,在复杂场景下,反而容 ...

  5. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  6. 2015腾讯暑期实习生 Web前端开发 面试经历

    [2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可 ...

  7. Microsoft Visual Studio Web 创作组件安装失败的解决方法

    在网上查一下说是Office2007的问题.我把Office2007卸载了还是不行. 然后用Windows Install Clean Up工具清理,还是不行. 郁闷了.然后在安装包中的下面路径下找到 ...

  8. GitHub开源:升讯威ADO.NET增强组件 sheng.ADO.NET.Plus V1.3

    GitHub: https://github.com/iccb1013/sheng.ADO.NET.Plus 早前分享过,当时没有把代码上传到Github,只是通过邮件的形式分享给了部分需要的朋友,最 ...

  9. 老李分享:Web Services 组件 1

    老李分享:Web Services 组件   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...

随机推荐

  1. Linux基础介绍【第七篇】

    linux用户分类 超级用户:UID=0,root 普通用户:UID 500起,由超级用户或具有超级用户权限的用户创建的用户. 虚拟用户:UID 1-499,为了满足文件或服务启动的需要而存在,一般都 ...

  2. Hadoop

    Hadoop应用场景 Hadoop是专为离线处理和大规模数据分析而设计的,它并不适合那种对几个记录随机读写的在线事务处理模式. 大数据存储:Hadoop最适合一次写入.多次读取的数据存储需求,如数据仓 ...

  3. 枚举:enum

    枚举 所谓枚举就是指定好取值范围,所有内容只能从指定范围取得. 例如,想定义一个color类,他只能有RED,GREEN,BLUE三种植. 使用简单类完成颜色固定取值问题. 1,就是说,一个类只能完成 ...

  4. 让ASP.NET5在Jexus上飞呀飞

    就在最近一段时间,“Visual Studio 2015 CTP 5”(以下简称CTP5)发布了,CTP5的发布不仅标志着新一代的VisualStudio正式发布又向前迈出了一步,还标志着距离ASP. ...

  5. Visual Studio Code 使用Git进行版本控制

    Visual Studio Code 使用Git进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 所有中文教程,竟没有一个靠谱的.遂动笔写一篇. 请确保你 ...

  6. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

  7. Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转

    前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于 ...

  8. iOS 之项目中遇到的问题总结

    昨天去一家公司面试,面试官问了我在项目开发中遇到过哪些问题,是什么引起的,怎样解决的? 当时由于有点小紧张只说出了一两点,现在就来好好总结一下. 问题: 1.两表联动 所谓的两表联动就是有左右两个表格 ...

  9. Application Request Route实现IIS Server Farms集群负载详解

    序言 随着公司业务的发展,后台业务就变的越来越多,然而服务器的故障又像月经一样,时不时的汹涌而至,让我们防不胜防.那么后台的高可用,以及服务器的处理能力就要做一个横向扩展的方案,以使后台业务持续的稳定 ...

  10. FTP的搭建与虚拟目录作用<之简单讲解>

    操作系统:win7 VS2010编写WebService与在IIS的发布<之简单讲解>中我已经说了IIS安装与使用,不明白的可以跳过去看. 1.添加FTP站点 2. 3. 4. 5. zq ...