基于angular图片裁剪

template/cropper.html     //自定义标签

//angular.modal

.directive('cropper', [function () {
        return {
            restrict: 'AE',
            replace: true,
            templateUrl: 'template/apple/cropper/cropper.html',
            scope:{
                size:'='
            },
            link: function (scope) {
                $('.cropme').simpleCropper();
            }
        };
    }])

所依赖的js  //  jquery.Jcrop.js,  jquery.SimpleCropper.js

html只需要写：

上传
移除

size 是图片的尺寸  可以自己设置哦。

这是上传图片的方法  用到了 angularfileUpdate。

注 ：文件上传时要添加依赖注入。

$scope.uploadFile = function () {
            var file = $("#imglogo").attr("src");//base64.
            console.log($scope.convertBase64UrlToBlob(file));//blob文件
            $upload.upload({
                url:  config.backend.ip+"file/upload",
                method: "POST",
                headers: {
                },
                data: {},
                file:$scope.convertBase64UrlToBlob(file)
            })
                .progress(function (evt) {
                })
                .success(function (data) {
                    $scope.growl(data.message,'success');
                })
                .error(function (e, code) {
                    $scope.growl(e,'error');
                });

        };

        $scope.convertBase64UrlToBlob = function(urlData){

            var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte

            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }

            return new Blob( [ab] , {type : 'image/png'});
        };

图片裁剪的原理 ，

把现有图片经过区域的选择，最后append一个img标签 src是裁剪后的base:64码  ，

上传文件是通过base:64 码转换成blob文件格式实现文件上传。