AngularJs + html 5 实现 裁剪上传

直接上代码

directive.js

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;
            // });
        }
    };
});

　　部分内容 请参照 html5 实现本地上传裁剪 http://www.webrube.com/jquery-html5-web_rube/4300

html 代码

<div class="col-sm-6">
                <div>
                    <file-uploader></file-uploader>
                </div>
 </div>