Question

我正在尝试将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调用包装在回调中，看起来非常讨厌。 / p>

另外，如果我使用范围。$ apply在onSelect回调中我得到$ digest已经进行中的错误。那是为什么？

编辑：我可以使用以下代码成功获得真实的图像大小，但必须有更好的方法来实现这一目标

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

Answer 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操作。

Answer 2

我正在制定一项指令，我将推动这项工作（经过多次修复）：

angular-image-crop

working demo

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

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

如何修复这个AngularJS JCrop指令？

2 个答案: