2

AngularJS で JCrop を使用しようとしています。少し修正するために助けが必要な次のディレクティブがあります。

.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 に答える