Edit

Editing: img_cropit.js

(function ($) {
    "use strict";

var $imageCropperContainer = $('#imageCropperContainer');
    var $avatarCropModalContainer = $('#avatarCropModalContainer');
    var $refImage = '';
    var $refInput = '';

// initial avatar crop object
    $imageCropperContainer.cropit({
        width: 350,
        height: 350,
        'onFileChange': function () {
            $avatarCropModalContainer.modal('show');
        },
        //smallImage: 'stretch',
        //minZoom: 'fit',
        onImageError: function (err) {
            $.toast({
                heading: err.message,
                bgColor: '#f63c3c',
                textColor: 'white',
                hideAfter: 5000,
                position: 'bottom-right',
                icon: 'error'
            });
        }
    });

$('body').on('click', '.select-image-cropit', function () {
        $refImage = $(this).attr('data-ref-image');
        $refInput = $(this).attr('data-ref-input');
        $imageCropperContainer.find('.cropit-image-input').trigger('click');
    });

// rotation buttons click handler
    $avatarCropModalContainer.find('button.rotate-cw').on('click', function () {
        $imageCropperContainer.cropit('rotateCW');
    });
    $avatarCropModalContainer.find('button.rotate-ccw').on('click', function () {
        $imageCropperContainer.cropit('rotateCCW');
    });

// Cancel Avatar Crop
    $('#cancelAvatarCrop').on('click', function (e) {
        e.preventDefault();

$avatarCropModalContainer.modal('hide');
    });

$('body').on('click', '#storeAvatar', function (e) {
        e.preventDefault();

var avatar = $imageCropperContainer.cropit('export');

$('#' + $refImage).attr('src', avatar);
        $('#' + $refInput).val(avatar);
        $avatarCropModalContainer.modal('hide');
    })
})(jQuery);

Back