首先感謝nodejs的發展，一堆好用的js庫擁現出來。以前我們想實現一個在線編輯圖片的功能，要麼用Flash, 要麼要花一個團隊好幾個月的時間去開發。而現在只要隨便搜搜就是成熟度非常高的開源js包
比如拖放功能，思路一般是用html5的API，聽着就感覺很難。interactjs就封裝爲draggable方法。
安裝極爲簡單，npm或者引用cdn即可
它的所有方法是支持鏈式操作的，就是可以連續調用
上圖的.drag-and-resize是CSS選擇器，draggable和resizable則分別爲拖放和改變大小的方法，可參照官方文檔進行選項的設置。這個庫不限於圖片，任何Html元素和Canvas都可以支持。如果你在做內容管理系統CMS的話，強烈推薦。
有時候圖片過大，我們想剪切一下。比如上傳用戶頭像的時候，我們要允許用戶裁切爲指定的大小，這樣在顯示頭像時就非常統一好看了。而這個用Cropperjs就足夠了，它的在線演示如下圖
功能非常完善了，藍線框是可以任意拖動的，在選定區域後，點擊Get Cropped Canvas, 就可以在彈出框裏顯示選擇的部分。
它的安裝也是支持npm和CDN的
調用也簡單的令人髮指
注意image是個html element, 不支持selector. 如果你還在用jQuery的話，可以用selector後用get()[0]來獲取html element
然後做一個button調用copper.getCroppedCanvas() 得到圖片二進制數據後上傳服務器即可
8.png