Angular圖片裁剪
Angular 圖片裁剪的組件實在是太少了，大多數人都會選擇在Angular使用JQuery的圖片裁剪插件，
但引入JQuery會相應的增加不少文件大小，這里我推薦大家使用fengyuanchen開源的原生js版本的
cropperjs,
看了cropperjs作者的vue中的用法，這里
我就重新整理了下Angular中如何優雅的使用cropperjs,當然更多的cropperjs
的用法，可以查看作者的文檔。此案例功能幾乎與作者的vue版本一致，只是使用angular來實現的，當然案例也存在一定的兼容性，目前本人在chrome和360安全瀏覽器的極速模式是可以正常運行的，在火狐
和IE10都會報錯。cropperjs上也有提到有轉換成ts版本的，目前沒有進行更多的測試，大家可以參考下
希望喜歡的朋友star下 ^=^ ^=^ ^=^
如下是我新建項目的步驟，具體請看源碼
1.創建項目
ng new angular-cropper --style=scss --skip-install
2.進入項目，安裝依賴包
cd angular-croppper
yarn install
3.修改package.json,默認瀏覽器自動打開
"start": "ng serve --open"
4.運行
npm start
angular6在沒有使用cropperjs之前，先打包看下文件多大
ng build --prod --aot
總大小：234kb左右
1.引入 cropperjs
yarn add cropperjs
2.修改angular.json
"styles": [
"./node_modules/cropperjs/dist/cropper.min.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/cropperjs/dist/cropper.js"
]
3.創建三個組件,一個服務
ng g c editor --spec=false
ng g c loader --spec=false
ng g c navbar --spec=false
ng g s service/sharedata --spec=false
4.注意index.html和styles.scss，更多查看代碼^=^ ^=^ ^=^
再打包看下文件大小
291kb左右
僅僅多了60kb左右，如果引入了jquery版本估計還更多，完美集成原生cropper.js ^=^ ^=^ ^=^