亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

騰訊 AlloyTeam 移動(dòng) Web 裁剪組件 AlloyCrop 正式開(kāi)源

yexiaobai / 2185人閱讀

摘要：兼容性如何支持以及的設(shè)備的瀏覽器便可運(yùn)行不一一列舉一共不到行為什么體積這么小騰訊手內(nèi)大量的都會(huì)去不斷地從各個(gè)維度進(jìn)行性能優(yōu)化。騰訊內(nèi)部有哪些項(xiàng)目在用目前主要是興趣部落群等業(yè)務(wù)在用，剛剛開(kāi)源出來(lái)，只要有裁剪圖片的地方都會(huì)用到。

傳送門(mén)

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

在線Demo演示:

簡(jiǎn)介

裁剪圖片的應(yīng)用場(chǎng)景有頭像編輯、圖像編輯，在移動(dòng)端要配合手勢(shì)以及進(jìn)行觸摸反饋來(lái)進(jìn)行變形以確認(rèn)用戶的選區(qū)進(jìn)行裁剪。AlloyCrop就是專(zhuān)注于裁剪圖像的組件，目前服務(wù)于QQ相關(guān)的Web業(yè)務(wù)，今日正式對(duì)外開(kāi)源。

項(xiàng)目截圖

這里需要注意的是，圓形裁剪出的圖片其實(shí)是正方形的，這里可以通過(guò)CSS3圓角邊框自行設(shè)置為圓形的圖片。

使用姿勢(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時(shí)候,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: 對(duì)比了下微信的頭像裁剪，為什么基于Web的AlloyCrop比微信Native還要流暢？為什么？為什么？
A: 基于transformjs和AlloyFinger打造的AlloyCrop必須流暢?。?br>這里猜測(cè)下（因?yàn)榭床坏轿⑿挪眉舻脑创a），微信頭像裁剪走的是軟繪，transformjs走的是硬繪。

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

Q: transformjs+AlloyFinger+ AlloyCrop 一共不到600行？為什么體積這么?。?br>A: 騰訊手Q內(nèi)大量的web都會(huì)去不斷地從各個(gè)維度進(jìn)行性能優(yōu)化。框架類(lèi)庫(kù)尺寸的大小就是其中很重要的一個(gè)維度，小文件明顯加載更快，解析也更快，這是很直接的優(yōu)化手段。100行代碼能解決的問(wèn)題絕對(duì)不會(huì)用1000行代碼去解決。所以Hammerjs被我們拋棄了，各種CSS3的js庫(kù)也被我們放棄。使用更加精簡(jiǎn)的、抽象層次更高的 transformjs和AlloyFinger。具體為何如此小，可以看看源碼。

Q: 騰訊內(nèi)部有哪些項(xiàng)目在用?
A: 目前AlloyCrop主要是興趣部落、QQ群等Web業(yè)務(wù)在用，剛剛開(kāi)源出來(lái)，只要有裁剪圖片的地方都會(huì)用到。AlloyFinger和transformjs擁有大量的項(xiàng)目在使用，包括公司外部的內(nèi)部的以及國(guó)內(nèi)的和國(guó)外的用戶。

你值得擁有

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

歡迎使用！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80938.html

相關(guān)文章

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

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

    番茄西紅柿 評(píng)論0 收藏0

  • 超小Web手勢(shì)庫(kù)AlloyFinger原理

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

    Karuru 評(píng)論0 收藏0

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

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

    zxhaaa 評(píng)論0 收藏0

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

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

    JouyPub 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<