app.directive('fileUploadersm', function () {

    return {

        restrict: 'E',

        transclude: true,

        template: '<input type="file" accept="images/*" id="files" >' + '<div class="containertsm"></div><button ng-click="upload()" class="btn btn-danger">确定上传</button><br/>' + '<ul><li ng-repeat="file in files"> - </li></ul>',

        controller: function ($scope, $fileUpload) {

            $scope.notReady = true;

            $scope.addfood = function () {

                $fileUpload.upload($scope.files);

            };

        },

        link: function ($scope, $element) {

            ////////////

            var tmp = $('<div class="resizer">' + '<div class="inner">' + '<img class="imgs">' + '<div class="frames"></div>' + '</div>' + '<button class="ok">✓</button>' + '</div>');

            $.imageResizer = function () {

                if (Uint8Array && HTMLCanvasElement && atob && Blob) {

                }

                else {

                    return false;

                }

                var resizer = tmp.clone();

                resizer.image = resizer.find('img')[0];

                resizer.frames = resizer.find('.frames');

                resizer.okButton = resizer.find('button.ok');

                resizer.frames.offset = {

                    top: 0,

                    left: 0

                };

                resizer.okButton.click(function () {

                    resizer.clipImage();

                });

                resizer.clipImage = function () {

                    var nh = this.image.naturalHeight, nw = this.image.naturalWidth, size = nw > nh ? nh : nw;

                    size = size > 150 ? 150 : size;

                    var canvas = $('<canvas class="tcanvas" width="' + size + '" height="' + size + '"></canvas>')[0],

                        ctx = canvas.getContext('2d'),

                        scale = nw / this.offset.width,

                        x = this.frames.offset.left * scale,

                        y = this.frames.offset.top * scale,

                        w = this.frames.offset.size * scale,

                        h = this.frames.offset.size * scale;

                    ctx.drawImage(this.image, x, y, w, h, 0, 0, size, size);

                    var src = canvas.toDataURL();

                    this.canvas = canvas;

                    this.append(canvas);

                    this.addClass('uploading');

                    this.removeClass('have-img');

                    src = src.split(',')[1];

                    if (!src)

                        return this.doneCallback(null);

                    src = window.atob(src);

                    var ia = new Uint8Array(src.length);

                    for (var i = 0; i < src.length; i++) {

                        ia[i] = src.charCodeAt(i);

                    }

                    ;

                    this.doneCallback(new Blob([ia], { type: "image/png" }));

                    Id = new Blob([ia], { type: "image/png" });//这里Id  存放的就是裁剪之后的相片你可以自定义全局参数

                };

                resizer.resize = function (file, done) {

                    this.reset();

                    this.doneCallback = done;

                    this.setFrameSize(0);

                    this.frames.css({

                        top: 0,

                        left: 0

                    });

                    var reader = new FileReader();

                    reader.onload = function () {

                        resizer.image.src = reader.result;

                        reader = null;

                        resizer.addClass('have-img');

                        resizer.setFrames();

                    };

                    reader.readAsDataURL(file);

                };

                resizer.reset = function () {

                    this.image.src = '';

                    this.removeClass('have-img');

                    this.removeClass('uploading');

                    this.find('canvas').detach();

                };

                resizer.setFrameSize = function (size) {

                    this.frames.offset.size = size;

                    return this.frames.css({

                        width: size + 'px',

                        height: size + 'px'

                    });

                };

                resizer.getDefaultSize = function () {

                    var width = this.find(".inner").width(), height = this.find(".inner").height();

                    this.offset = {

                        width: width,

                        height: height

                    };

                    console.log(this.offset);

                    return width > height ? height : width;

                };

                resizer.moveFrames = function (offset) {

                    var x = offset.x, y = offset.y, top = this.frames.offset.top, left = this.frames.offset.left, size = this.frames.offset.size, width = this.offset.width, height = this.offset.height;

                    if (x + size + left > width) {

                        x = width - size;

                    }

                    else {

                        x = x + left;

                    }

                    ;

                    if (y + size + top > height) {

                        y = height - size;

                    }

                    else {

                        y = y + top;

                    }

                    ;

                    x = x < 0 ? 0 : x;

                    y = y < 0 ? 0 : y;

                    this.frames.css({

                        top: y + 'px',

                        left: x + 'px'

                    });

                    this.frames.offset.top = y;

                    this.frames.offset.left = x;

                };

                (function () {

                    var time;

                    function setFrames() {

                        var size = resizer.getDefaultSize();

                        resizer.setFrameSize(size);

                    }

                    ;

                    window.onresize = function () {

                        clearTimeout(time);

                        time = setTimeout(function () {

                            setFrames();

                        }, 1000);

                    };

                    resizer.setFrames = setFrames;

                })();

                (function () {

                    var lastPoint = null;

                    function getOffset(event) {

                        event = event.originalEvent;

                        var x, y;

                        if (event.touches) {

                            var touch = event.touches[0];

                            x = touch.clientX;

                            y = touch.clientY;

                        }

                        else {

                            x = event.clientX;

                            y = event.clientY;

                        }

                        if (!lastPoint) {

                            lastPoint = {

                                x: x,

                                y: y

                            };

                        }

                        ;

                        var offset = {

                            x: x - lastPoint.x,

                            y: y - lastPoint.y

                        };

                        lastPoint = {

                            x: x,

                            y: y

                        };

                        return offset;

                    }

                    ;

                    resizer.frames.on('touchstart mousedown', function (event) {

                        getOffset(event);

                    });

                    resizer.frames.on('touchmove mousemove', function (event) {

                        if (!lastPoint)

                            return;

                        var offset = getOffset(event);

                        resizer.moveFrames(offset);

                    });

                    resizer.frames.on('touchend mouseup', function (event) {

                        lastPoint = null;

                    });

                })();

                return resizer;

            };

            var resizer = $.imageResizer(), resizedImage;

            if (!resizer) {

                resizer = $("<p>Your browser doesn't support these feature:</p><ul><li>canvas</li><li>Blob</li><li>Uint8Array</li><li>FormData</li><li>atob</li></ul>");

            }

            ;

            $('.containertsm').append(resizer);

            ///////////////////

            var fileInput = $element.find('input[type="file"]');

            fileInput.bind('change', function (e) {

                var file = this.files[0];

                resizer.resize(file, function (file) {

                    resizedImage = file;

                });

                $scope.notReady = e.target.files.length == 0;

                $scope.files = [];

                for (i in e.target.files) {

                    //Only push if the type is object for some stupid-ass reason browsers like to include functions and other junk

                    if (typeof e.target.files[i] == 'object')

                        $scope.files.push(e.target.files[i]);

                }

            });

            // var file=this.files[0];

            // resizer.resize(file,function(file){

            //     resizedImage=file;

            // });

        }

    };

});

<div class="col-sm-6">

                <div>

                    <file-uploader></file-uploader>

                </div>
 </div>