Question

我必须在上传后才能在模态中获得图片。所以我打开一个模态（ $ scope.openResizeModal（）），并将我的图片放在我的范围内。

uploads.client.controller.js

$scope.openResizeModal = function (flow) {
        $scope.pictureToCrop = {};
        $scope.pictureToCrop = flow.files[0];
}

然后我尝试在我的HTML视图中打印：

调整-modal.client.view.html

<img-cropped src="{{pictureToCrop}}" selected='selected(cords)'></img-cropped>

AngularJS告诉我们：

Error: [$interpolate:interr] Can't interpolate: {{pictureToCrop}}
TypeError: Converting circular structure to JSON

我甚至试过经典

<img src={{pictureToCrop}} />

但它是一样的。

这是我的指示：

angular.module('uploads').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) {
                        scope.$apply(function () {
                            scope.selected({ cords: x });
                        });
                    },
                    aspectRatio: 1/1.4
                }, function () {
                    // Use the API to get the real image size 
                    var bounds = this.getBounds();
                    pwGlobal.boundx = bounds[0];
                    pwGlobal.boundy = bounds[1];
                });
            }
        });
        scope.$on('$destroy', clear);
    }
};

}）;

全部谢谢！

Answer 1

这是一个内部流动问题：

        var fileReader = new FileReader();
        fileReader.readAsDataURL(flow.files[0].file);
        fileReader.onload = function (event) {
            $scope.pictureToCrop = event.target.result;
        };

解决了我的问题。图像以base64编码转换。

img ng-src：TypeError：将循环结构转换为JSON

1 个答案: