資訊專欄INFORMATION COLUMN
摘要：兼容性如何支持以及的設(shè)備的瀏覽器便可運(yùn)行不一一列舉一共不到行為什么體積這么小騰訊手內(nèi)大量的都會去不斷地從各個維度進(jìn)行性能優(yōu)化。騰訊內(nèi)部有哪些項目在用目前主要是興趣部落群等業(yè)務(wù)在用，剛剛開源出來，只要有裁剪圖片的地方都會用到。
傳送門
Github地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop
在線Demo演示:
裁剪圖片的應(yīng)用場景有頭像編輯、圖像編輯，在移動端要配合手勢以及進(jìn)行觸摸反饋來進(jìn)行變形以確認(rèn)用戶的選區(qū)進(jìn)行裁剪。AlloyCrop就是專注于裁剪圖像的組件，目前服務(wù)于QQ相關(guān)的Web業(yè)務(wù)，今日正式對外開源。
項目截圖這里需要注意的是，圓形裁剪出的圖片其實是正方形的，這里可以通過CSS3圓角邊框自行設(shè)置為圓形的圖片。
使用姿勢 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: "確認(rèn)", // optional parameters , the default value is ok
cancel_text: "取消" // optional parameters , the default value is cancel
});
image_src為需要裁剪的圖片的地址
circle為裁剪組件的樣式，為可選參數(shù)，默認(rèn)值是false。需要注意：當(dāng)設(shè)置為true時候,width必須等于height。
width為裁剪區(qū)域的寬
height為裁剪區(qū)域的高
ok為點擊確認(rèn)按鈕的回調(diào)函數(shù)，并且可以拿到裁剪完成的base64和裁剪所用的canvas
cancel為點擊取消按鈕的回調(diào)函數(shù)
ok_text為確認(rèn)按鈕的文本，可選。默認(rèn)是 ok
cancel_text為取消按鈕的文本，可選。默認(rèn)是 cancel
Q&AQ: 對比了下微信的頭像裁剪，為什么基于Web的AlloyCrop比微信Native還要流暢？為什么？為什么？
A: 基于transformjs和AlloyFinger打造的AlloyCrop必須流暢啊！
這里猜測下（因為看不到微信裁剪的源碼），微信頭像裁剪走的是軟繪，transformjs走的是硬繪。
Q: 兼容性如何
A: 支持touchstart、touchmove、touchend、touchcancel以及CSS3 transform的設(shè)備的瀏覽器便可運(yùn)行AlloyCrop....不一一列舉..
Q: transformjs+AlloyFinger+ AlloyCrop 一共不到600行？為什么體積這么?。?br>A: 騰訊手Q內(nèi)大量的web都會去不斷地從各個維度進(jìn)行性能優(yōu)化?？蚣茴悗斐叽绲拇笮【褪瞧渲泻苤匾囊粋€維度，小文件明顯加載更快，解析也更快，這是很直接的優(yōu)化手段。100行代碼能解決的問題絕對不會用1000行代碼去解決。所以Hammerjs被我們拋棄了，各種CSS3的js庫也被我們放棄。使用更加精簡的、抽象層次更高的 transformjs和AlloyFinger。具體為何如此小，可以看看源碼。
Q: 騰訊內(nèi)部有哪些項目在用?
A: 目前AlloyCrop主要是興趣部落、QQ群等Web業(yè)務(wù)在用，剛剛開源出來，只要有裁剪圖片的地方都會用到。AlloyFinger和transformjs擁有大量的項目在使用，包括公司外部的內(nèi)部的以及國內(nèi)的和國外的用戶。
Github地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop
歡迎使用！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80938.html
摘要：高性能動畫與端場景需要相比，移動端需要考慮的因素也相對復(fù)雜，重點考慮流量功耗與流暢度。而在移動端，我們選擇性能更優(yōu)瀏覽器原生實現(xiàn)方案動畫。然而，動畫在移動多終端設(shè)備場景下，相比會面對更多的性能問題，主要體現(xiàn)在動畫的卡頓與閃爍。1.高性能CSS3動畫 與PC端場景需要相比，移動web端需要考慮的因素也相對復(fù)雜，重點考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...
摘要：目前作為騰訊手機(jī)手勢解決方案，在各大項目中都發(fā)揮著作用。因此也入選了騰訊平臺的精品組件除了國內(nèi)外的項目團(tuán)隊都在使用，國內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報道，作為超級小的手勢庫，騰訊的項目為什么不選擇而選擇下面從各個角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...
摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...
摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊 騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...
閱讀 5739·2021-11-24 10:25
閱讀 2690·2021-11-16 11:44
閱讀 3843·2021-10-11 11:09
閱讀 3172·2021-09-02 15:41
閱讀 3256·2019-08-30 14:14
閱讀 2271·2019-08-29 14:10
閱讀 2345·2019-08-29 11:03
閱讀 1125·2019-08-26 13:47
