2

我正在尝试将 JCrop 与 AngularJS 一起使用。我有以下指令,我需要帮助修复一下:

.directive('imgCropped', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { src:'@', selected:'&' },
        link: function(scope,element, attr) {
            var myImg;
            var clear = function() {
                if (myImg) {
                    myImg.next().remove();
                    myImg.remove();
                    myImg = undefined;
                }
            };
            scope.$watch('src', function(nv) {
                clear();
                if (nv) {
                    element.after('<img />');
                    myImg = element.next();
                    myImg.attr('src',nv);

                    $(myImg).Jcrop({
                        trackDocument: true,
                        onSelect: function(x) {
                            /*if (!scope.$$phase) {
                                scope.$apply(function() {
                                    scope.selected({cords: x});
                                });
                            }*/
                            scope.selected({cords: x});
                        },
                        aspectRatio: 1,
                        boxWidth: 400, boxHeight: 400,
                        setSelect: [0, 0, 400, 400]
                    });
                }
            });

            scope.$on('$destroy', clear);
        }
    };
})

问题是 JCrop 没有正确检测到真实的图像大小,我需要添加一个 trueSize 选项,我知道如何做的唯一方法是将 Jcrop 调用包装在回调中,看起来很讨厌。

另外,如果我在 onSelect 回调中使用 scope.$apply ,我会收到 $digest already in progress 错误。这是为什么 ?

编辑:我可以使用以下代码成功获得真实的图像大小,但必须有更好的方法来做到这一点

.directive('imgCropped', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { src:'@', selected:'&' },
        link: function(scope,element, attr) {
            var myImg;
            var clear = function() {
                if (myImg) {
                    myImg.next().remove();
                    myImg.remove();
                    myImg = undefined;
                }
            };
            scope.$watch('src', function(nv) {
                clear();
                if (nv) {
                    element.after('<img />');
                    myImg = element.next();
                    myImg.attr('src',nv);

                    var temp = new Image();
                    temp.src = nv;
                    temp.onload = function() {
                        var width = this.width;
                        var height = this.height;

                        $(myImg).Jcrop({
                            trackDocument: true,
                            onSelect: function(x) {
                                /*if (!scope.$$phase) {
                                 scope.$apply(function() {
                                 scope.selected({cords: x});
                                 });
                                 }*/
                                scope.selected({cords: x});
                            },
                            aspectRatio: 1,
                            boxWidth: 400, boxHeight: 400,
                            setSelect: [0, 0, 400, 400],
                            trueSize: [width, height]
                        });
                    }
                }
            });

            scope.$on('$destroy', clear);
        }
    };
})
4

2 回答 2

1

你在做什么可能没问题。该指令看起来不错。至于获取图像大小,您可以使用直接的 JavaScript 来完成,如下所示:

var img = new Image();
img.onload = function () {
   var w = img.width,
       h = img.height;
   //do what you need to do here.
};
img.src = 'somefile.gif';

它将为您节省 DOM 操作。

于 2013-01-24T16:01:16.527 回答
0

我正在制定一项我将推动凉亭的指令(经过更多修复):

角度图像裁剪

工作演示

在构造函数回调中,我调用this.getBounds()然后将这些值应用于cordsin onSelect

https://github.com/coolaj86/angular-image-crop/blob/master/app/scripts/controllers/profile-pic.js#L24

于 2014-05-12T14:42:22.347 回答