public function registerClientScript()
    {
        $view = $this->getView();
        // Register jQuery image cropping js and css files
        CropperAsset::register($view);
        // Additional plugin options
        $options = Json::encode($this->pluginOptions);

        $selector = "#$this->id .crop-image-container > img";

        if ($this->modal) {
            $ajaxOptions = Json::encode($this->ajaxOptions);
            $view->registerJs(<<<JS
(function() {

    var modalBox = $("#$this->id"),
        image = $("$selector"),
        cropBoxData,
        canvasData,
        cropUrl;

    modalBox.on("shown.bs.modal", function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        cropUrl = button.data('crop-url'); // Extract info from data-* attributes

        image.cropper($.extend({
            built: function () {
                // Strict mode: set crop box data first
                image.cropper('setCropBoxData', cropBoxData);
                image.cropper('setCanvasData', canvasData);
            },
            dragend: function() {
                cropBoxData = image.cropper('getCropBoxData');
                canvasData = image.cropper('getCanvasData');
            }
        }, $options));
    }).on('hidden.bs.modal', function () {
        cropBoxData = image.cropper('getCropBoxData');
        canvasData = image.cropper('getCanvasData');
        image.cropper('destroy');
    });

    $(document).on("click", "#$this->id .crop-submit", function(e) {
        e.preventDefault();

        $.ajax($.extend({
            method: "POST",
            url: cropUrl,
            data: image.cropper("getData"),
            dataType: "JSON",
            error: function() {
                alert("Error while cropping");
            }
        }, $ajaxOptions));

        modalBox.modal("hide");
    });

})();
JS
            );
        } else {
            $view->registerJs(";$(\"$selector\").cropper($options);");
        }
    }
public function registerClientScript()
    {
        $view = $this->getView();
        // Register jQuery image cropping js and css files
        CropperAsset::register($view);
        // Additional plugin options
        $options = Json::encode($this->pluginOptions);

        $selector = "#$this->id .crop-image-container > img";

        if ($this->modal) {
            $ajaxOptions = Json::encode($this->ajaxOptions);
            $view->registerJs(<<<JS
(function() {

    var modalBox = $("#$this->id"),
        image = $("$selector"),
        cropBoxData,
        canvasData,
        cropUrl;

    modalBox.on("shown.bs.modal", function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        cropUrl = button.data('crop-url'); // Extract info from data-* attributes

        image.cropper($.extend({
            built: function () {
                // Strict mode: set crop box data first
                image.cropper('setCropBoxData', cropBoxData);
                image.cropper('setCanvasData', canvasData);
            },
            dragend: function() {
                cropBoxData = image.cropper('getCropBoxData');
                canvasData = image.cropper('getCanvasData');
            }
        }, $options));
    }).on('hidden.bs.modal', function () {
        cropBoxData = image.cropper('getCropBoxData');
        canvasData = image.cropper('getCanvasData');
        image.cropper('destroy');
    });

    $(document).on("click", "#$this->id .crop-submit", function(e) {
        e.preventDefault();

        $.ajax($.extend({
            method: "POST",
            url: cropUrl,
            data: image.cropper("getData"),
            dataType: "JSON",
            error: function() {
                alert("Error while cropping");
            }
        }, $ajaxOptions));

        modalBox.modal("hide");
    });

})();
JS
            );
        } else {
            $view->registerJs(";$(\"$selector\").cropper($options);");
        }
    }
public function registerClientScript ( ) { $ view = $ this -> getView ( ) ; // Register jQuery image cropping js and css files CropperAsset :: register ( $ view ) ; // Additional plugin options $ options = Json :: encode ( $ this -> pluginOptions ) ; $ selector = "#$this->id .crop-image-container > img" ; if ( $ this -> modal ) { $ ajaxOptions = Json :: encode ( $ this -> ajaxOptions ) ; $ view -> registerJs ( <<<JS
(function() {

    var modalBox = $("#$this->id"),
        image = $("$selector"),
        cropBoxData,
        canvasData,
        cropUrl;

    modalBox.on("shown.bs.modal", function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        cropUrl = button.data('crop-url'); // Extract info from data-* attributes

        image.cropper($.extend({
            built: function () {
                // Strict mode: set crop box data first
                image.cropper('setCropBoxData', cropBoxData);
                image.cropper('setCanvasData', canvasData);
            },
            dragend: function() {
                cropBoxData = image.cropper('getCropBoxData');
                canvasData = image.cropper('getCanvasData');
            }
        }, $options));
    }).on('hidden.bs.modal', function () {
        cropBoxData = image.cropper('getCropBoxData');
        canvasData = image.cropper('getCanvasData');
        image.cropper('destroy');
    });

    $(document).on("click", "#$this->id .crop-submit", function(e) {
        e.preventDefault();

        $.ajax($.extend({
            method: "POST",
            url: cropUrl,
            data: image.cropper("getData"),
            dataType: "JSON",
            error: function() {
                alert("Error while cropping");
            }
        }, $ajaxOptions));

        modalBox.modal("hide");
    });

})();
JS ) ; } else { $ view -> registerJs ( ";$(\"$selector\").cropper($options);" ) ; } }
Registers required script for the plugin to work as jQuery image cropping
Registers required script for the plugin to work as jQuery image cropping