先來看一下項目中的效果圖：

Paste_Image.png

需求場景：在做一個員工管理系統(tǒng)中，用到了angularjs，在員工入職的功能中需要上傳員工的證件照作為員工在公司的檔案，因為這個頭像在前端有展示需要，展示正方形且用CSS3畫一個圓頭，這里就需要對頭像做裁剪，以保證圖片在服務(wù)器是以正方形存儲。

我翻閱了好多文檔和資料，發(fā)現(xiàn)angualrjs上傳圖片的挺多，但是裁剪并上傳的少之又少，試了兩三個還沒成功，無奈之下，就那js插件用到了angualr項目中，當(dāng)然有很多不足，還望大神指教。

首先執(zhí)行bower install croppie --save把文件下載到項目中，并更新bower.json文件。

//html代碼：
<div id="upload-demo"></div>
<div layout="row" layout-align="space-around center" class="actions" flex>
       <md-button class="file-btn">
             <span>選擇文件</span>
             <input type="file" id="upload"  onchange="angular.element(this).scope().uploadReadfile(this.files)"  ng-model="vm.imgs" />
       </md-button>
        <div class="crop">
              <md-button class="upload-result" ng-click="vm.upload_img()">上傳</md-button>
        </div>
         <!-- <div id="result"></div>-->
</div>
//這里我其實是放到了一個Dialog中的，可以根據(jù)你們的需求而定。

上面的代碼片段中，需要注意一點：在angular中input type='file' ，取值并不像jQuery中一樣，這里用到

 <input type="file" id="upload"  onchange="angular.element(this).scope().uploadReadfile(this.files)"  ng-model="vm.imgs" /> 
//這里的ng-model其實并沒有多大用處

//JS代碼：
(function () {
    'use strict';

    angular
        .module('app.archives.employee')
        .controller('CroppingController', CroppingController);

    /** @ngInject */
    function CroppingController($mdDialog, $scope, msApi, ynProfileService) {
        var vm = this;
        vm.url = "";
        var $uploadCrop;
        $scope.uploadReadfile = function (file) {
            readFile(file);
        };
        function readFile(input) {
            angular.element('#upload-demo').find('.cr-boundary').remove();
            angular.element('#upload-demo').find('.cr-slider-wrap').remove();
            $uploadCrop = angular.element('#upload-demo').croppie({
                viewport: {
                    width: 150,
                    height: 150,
                    type: 'square',
                },
                enableExif: true,
                boundary: {     //可視區(qū)域大小
                    width: 200,
                    height: 200
                }
            });
            if (input) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    });
                };
                reader.readAsDataURL(input[0]);
            }
            else {
                console.log("對不起！您的瀏覽器版本過低！");
            }
        }

        vm.upload_img = upload_img;
        function upload_img() {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (resp) {
                msApi.request('hlh.baseImg',
                    {
                        token: ynProfileService.getToken(),
                        pdata: {
                            'resp': resp
                        }
                    },
                    function (res) {
                        vm.data = res;
                        //vm.closeDialog();
                        $mdDialog.hide(vm.data);
                    });
                // popupResult({
                //     src: resp
                // });
            });
        }

        vm.closeDialog = closeDialog;
        function closeDialog() {
            // $mdDialog.hide();
            $mdDialog.hide();
        }
  }
})();

上面的代碼我不在做詳解，有不懂的可以DD我。