How to get data of a cropped image after cropping the image in cropper.js?

Question

This the part of my code, where I'm initializing the canvas with the image source.

var $image = "";
var extension = "";
var options = {
    viewMode: 3,
    checkCrossOrigin: false,
    crop: function (e) {
        return e.detail;
    }
};

var initCrop = function () {
    var src = scope.selectedFileSrc;
    $timeout(function () {
        $image = $("#cropImage");
        $image.attr('src', src);
        $image.cropper(options);
    });

};

scope.setCropMethod = function (method, option) {
    var result = $image.cropper(method, option);
    var x = $image.cropper.getData();
    switch (method) {
        case "getCroppedCanvas":
            if (result) {
                scope.croppedFileSrc = result.toDataURL();
                scope.$emit('imageCropped', {
                    croppedImage: result,
                    croppedExtension: extension
                });
            }
            break;
        case "reset":
            if (scope.croppedFileSrc) {
                scope.croppedFileSrc = "";
                $image.cropper('destroy');
                initCrop();
            }
            break;
    }
scope.$on('$destroy', function () {
    $image.cropper('destroy');
});

initCrop();

I want to get the offsetX, offsetY, height and width of the image, after cropping the image.

Please help me on that, thanks in advance.