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

yexiaobai 发布于2019-08-20 12:21 / 2137人阅读

摘要：兼容性如何支持以及的设备的浏览器便可运行不一一列举一共不到行为什么体积这么小腾讯手内大量的都会去不断地从各个维度进行性能优化。腾讯内部有哪些项目在用目前主要是兴趣部落群等业务在用，刚刚开源出来，只要有裁剪图片的地方都会用到。

传送门

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: 基于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地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop

欢迎使用！

云服务器 GPU云服务器 Android开源组件组件web服务器 web服务器组件 AlloyCrop

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80938.html

前端小记4——高性能mobile web开发

摘要：高性能动画与端场景需要相比，移动端需要考虑的因素也相对复杂，重点考虑流量功耗与流畅度。而在移动端，我们选择性能更优浏览器原生实现方案动画。然而，动画在移动多终端设备场景下，相比会面对更多的性能问题，主要体现在动画的卡顿与闪烁。1.高性能CSS3动画与PC端场景需要相比，移动web端需要考虑的因素也相对复杂，重点考虑：流量、功耗与流畅度。在pc端上考虑更多的是流畅度，而mobile web中...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
超小Web手势库AlloyFinger原理

摘要：目前作为腾讯手机手势解决方案，在各大项目中都发挥着作用。因此也入选了腾讯平台的精品组件除了国内外的项目团队都在使用，国内外的各大网站也进行了转载报道，作为超级小的手势库，腾讯的项目为什么不选择而选择下面从各个角度架构原理上进行一下分析。目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。感兴趣的同学可以去Github看看： https://git...

Karuru 2019-08-20 12:12 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0