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

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

AngularJS项目中使用Croppie插件实现图片的裁剪上传_第1张图片
Paste_Image.png

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

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

首先执行bower install croppie --save把文件下载到项目中,并更新bower.json文件。

//html代码:
选择文件
上传
//这里我其实是放到了一个Dialog中的,可以根据你们的需求而定。

上面的代码片段中,需要注意一点:在angular中input type='file' ,取值并不像jQuery中一样,这里用到

  
//这里的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我。

你可能感兴趣的:(AngularJS项目中使用Croppie插件实现图片的裁剪上传)