AngularJS项目中使用Croppie插件实现图片的裁剪上传

先来看一下项目中的效果图：

Paste_Image.png

需求场景：在做一个员工管理系统中，用到了angularjs，在员工入职的功能中需要上传员工的证件照作为员工在公司的档案，因为这个头像在前端有展示需要，展示正方形且用CSS3画一个圆头，这里就需要对头像做裁剪，以保证图片在服务器是以正方形存储。

我翻阅了好多文档和资料，发现angualrjs上传图片的挺多，但是裁剪并上传的少之又少，试了两三个还没成功，无奈之下，就那js插件用到了angualr项目中，当然有很多不足，还望大神指教。

首先执行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中的，可以根据你们的需求而定。

上面的代码片段中，需要注意一点：在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: {     //可视区域大小
                    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我。