At example uses Bootstrap. You can don't use it at your projects.

Plugin can be uses without Bootstrap.

jQuery-Cropbox

A lightweight and simple plugin to crop your image.

To GitHub plugin page Extension for Yii2

Browse

Result of cropping

...

Source code of example

CSS

div.cropbox .btn-file {
    position: relative;
    overflow: hidden;
}
div.cropbox .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
div.cropbox .cropped {
    margin-top: 10px;
}

HTML

 


    

        

            
            

        

        

            

        

    

    

        
            
            Browse 
        
        
        
    

    

        
Result of cropping

        
...

JS

$('#plugin').cropbox({
    selectors: {
        inputInfo: '#plugin textarea.data',
        inputFile: '#plugin input[type="file"]',
        btnCrop: '#plugin .btn-crop',
        btnReset: '#plugin .btn-reset',
        resultContainer: '#plugin .cropped .panel-body',
        messageBlock: '#message'
    },
    imageOptions: {
        class: 'img-thumbnail',
        style: 'margin-right: 5px; margin-bottom: 5px'
    },
    variants: [
        {
            width: 200,
            height: 200,
            minWidth: 180,
            minHeight: 200,
            maxWidth: 350,
            maxHeight: 350
        },
        {
            width: 150,
            height: 200
        }
    ],
    messages: [
        'Crop a middle image.',
        'Crop a small image.'
    ]
});