Question

我目前正在使用ngImgCrop提供个人资料照片的上传预览（和方形裁剪）。

不幸的是，图像预览和裁剪都没有显示。

'use strict';

function UserProfileCtrl($scope, $stateParams, UserService, $modal)    {
    var handleFileSelect = function(evt) {
        var file = evt.currentTarget.files[0];
        var reader = new FileReader();
        reader.onload = function (evt) {
            $scope.$apply(function($scope){
                var modalInstance = $modal.open({
                    templateUrl: '/panel/views/User/image.html',
                    size: 'lg',
                    controller: UserImageCtrl,
                    resolve:    {
                        loadPlugin: function ($ocLazyLoad) {
                            return $ocLazyLoad.load([
                                {
                                    name: 'ngImgCrop',
                                    files: [
                                        '/panel/js/plugins/ngImgCrop/ng-img-crop.js',
                                        '/panel/css/plugins/ngImgCrop/ng-img-crop.css'
                                    ]
                                }
                            ]);
                        },
                        image: function()  {
                            return evt.target.result;
                        }
                    }
                });
            });
        };
        reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#new_image')).on('change',handleFileSelect);
}

'use strict';

function UserImageCtrl($scope, $modalInstance, image)    {
    console.log(image);
    $scope.image_start = image;
    $scope.image_cropped = '';

    $scope.submit = function()  {
      
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    }
}

Console.log输出是Base64 img代码。

    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">
                <div class="cropArea">
                    <img-crop area-type="square" image="image_start" result-image="image_cropped"></img-crop>
                </div>
            </div>

            <div class="col-md-6">
                <h4>Preview image</h4>
                <div class="m-b-md"><img ng-src="{{image_cropped}}" /></div>
            </div>
        </div>
    </div>

Chrome开发视图： DOM View Network view

提前感谢您的帮助。

Answer 1

我有类似的问题。如果您可以触发area-move事件，它将始终查看父元素并相应地调整大小。所以这是触发该事件所需要做的事情。

ng-img-crop公开了一个名为cropPubSub的服务，您可以将其注入控制器

.conroller('someCtrl', function($scope, cropPubSub){...}

然后，一旦你的模态打开，你可以调用一个触发事件，它应该查看父元素的宽度和高度，并相应地调整图像的大小。因此，对于我的例子，我调用了一个函数来打开模态

$scope.callModal = function(val){
    if(val){
        $('#cropImgModal').modal('show');
        var myEvent = new cropPubSub();
        $timeout(function(){
            myEvent.trigger('area-move');
        },200);  // 200 seconds was about right for me for the modal to be fully open
    }
};

希望这有助于某人

ngImgCrop上传预览不显示模态中的任何图片

1 个答案: