成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

騰訊 AlloyTeam 移動 Web 裁剪組件 AlloyCrop 正式開源

yexiaobai / 2141人閱讀

摘要：兼容性如何支持以及的設(shè)備的瀏覽器便可運(yùn)行不一一列舉一共不到行為什么體積這么小騰訊手內(nèi)大量的都會去不斷地從各個維度進(jìn)行性能優(yōu)化。騰訊內(nèi)部有哪些項(xiàng)目在用目前主要是興趣部落群等業(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ù)，今日正式對外開源。

項(xiàng)目截圖

這里需要注意的是，圓形裁剪出的圖片其實(shí)是正方形的，這里可以通過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為點(diǎn)擊確認(rèn)按鈕的回調(diào)函數(shù)，并且可以拿到裁剪完成的base64和裁剪所用的canvas

cancel為點(diǎn)擊取消按鈕的回調(diào)函數(shù)

ok_text為確認(rèn)按鈕的文本，可選。默認(rèn)是 ok

cancel_text為取消按鈕的文本，可選。默認(rèn)是 cancel

Q&A

Q: 對比了下微信的頭像裁剪，為什么基于Web的AlloyCrop比微信Native還要流暢？為什么？為什么？
A: 基于transformjs和AlloyFinger打造的AlloyCrop必須流暢?。?br>這里猜測下（因?yàn)榭床坏轿⑿挪眉舻脑创a），微信頭像裁剪走的是軟繪，transformjs走的是硬繪。

Q: 兼容性如何
A: 支持touchstart、touchmove、touchend、touchcancel以及CSS3 transform的設(shè)備的瀏覽器便可運(yùn)行AlloyCrop....不一一列舉..

Q: transformjs+AlloyFinger+ AlloyCrop 一共不到600行？為什么體積這么??？
A: 騰訊手Q內(nèi)大量的web都會去不斷地從各個維度進(jìn)行性能優(yōu)化?？蚣茴悗斐叽绲拇笮【褪瞧渲泻苤匾囊粋€維度，小文件明顯加載更快，解析也更快，這是很直接的優(yōu)化手段。100行代碼能解決的問題絕對不會用1000行代碼去解決。所以Hammerjs被我們拋棄了，各種CSS3的js庫也被我們放棄。使用更加精簡的、抽象層次更高的 transformjs和AlloyFinger。具體為何如此小，可以看看源碼。

Q: 騰訊內(nèi)部有哪些項(xiàng)目在用?
A: 目前AlloyCrop主要是興趣部落、QQ群等Web業(yè)務(wù)在用，剛剛開源出來，只要有裁剪圖片的地方都會用到。AlloyFinger和transformjs擁有大量的項(xiàng)目在使用，包括公司外部的內(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://systransis.cn/yun/80938.html

相關(guān)文章

  • 前端小記4——高性能mobile web開發(fā)

    摘要：高性能動畫與端場景需要相比，移動端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮流量功耗與流暢度。而在移動端，我們選擇性能更優(yōu)瀏覽器原生實(shí)現(xiàn)方案動畫。然而，動畫在移動多終端設(shè)備場景下，相比會面對更多的性能問題，主要體現(xiàn)在動畫的卡頓與閃爍。1.高性能CSS3動畫 與PC端場景需要相比，移動web端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...

    番茄西紅柿 評論0 收藏0

  • 超小Web手勢庫AlloyFinger原理

    摘要：目前作為騰訊手機(jī)手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺的精品組件除了國內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報道，作為超級小的手勢庫，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...

    Karuru 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    zxhaaa 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    JouyPub 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<