最近接到一個新的需求：
用戶可以上傳圖片到瀏覽器，然後進行基礎的編輯。
下面是四個圖片編輯方案
方案1 cropper.js
這是國內同行寫的組件，星標 7.8K，比較穩定。缺點：最新版本基於Jquery，早期版本原生JS。
代碼鏈接：
cropper
https://fengyuanchen.github.io/cropper/
效果演示
下面是參考鏈接
官網：https://fengyuanchen.github.io/cropper/
https://github.com/fengyuanchen/cropper
https://www.npmjs.com/package/cropperjs
https://blog.csdn.net/achejq/article/details/93240104
https://www.jb51.net/article/163621.htm
方案2 fabricjs
國外同行寫的組件，github stars15K，代碼成熟穩定
功能強大，Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser（文檔細節我正在看）
官網鏈接
http://fabricjs.com/
https://github.com/fabricjs/fabric.js
方案3 EaselJS
功能強大，支持複雜的圖片編輯。github stars 7.5K
Easel Javascript庫提供了完整的分層顯示列表，核心交互模型和幫助程序類，使使用HTML5 Canvas元素更加容易。這是一個用於在HTML5中構建高性能交互式2D內容的庫。 它提供了功能豐富的顯示列表，可讓您操作和製作圖形動畫。 它還爲鼠標和觸摸交互提供了強大的交互模型。它非常適合構建遊戲，生成藝術，廣告，數據可視化以及其他高度圖形化的體驗。 它可以單獨使用，也可以與其他CreateJS套件（SoundJS，PreloadJS和TweenJS）配合使用。它沒有外部依賴關係，實際上應該與您喜歡使用的任何框架兼容。
官網鏈接：
http://createjs.com/
https://www.createjs.com/easeljs
https://github.com/CreateJS/EaselJS
思路4 fabric-photo
這個是國內作者，基於思路2的代碼，做出的React兼容的庫。
優點：和React兼容
缺點：github stars 80 較少
https://github.com/ximing/fabric-photo
時間有限，這幾個庫的優缺點對比沒有具體寫。根據實際需求決定使用哪個庫。
如果用戶上傳矢量圖，最好使用第二個；如果用戶上傳的是柵格圖，那麼可以選擇13個。第四個主要適合React兼容，如果是原生JS或者VUE可以不使用。
稍後進一步學習