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

傳送門

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

歡迎使用！