JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="avatar_cropper_content_a"><img style="display:block;vertical-align: top;height:273px;width:200px;" src="http://cs617320.vk.me/v617320502/1a597/VH3HF-dXsJQ.jpg" data-img="cropper_2"></div>
<div class="avatar_cropper_content_b">
    <div class="avatar_cropper_content_l"><img style="display:block;vertical-align: top;" src="http://cs617320.vk.me/v617320502/1a597/VH3HF-dXsJQ.jpg" data-img_min="cropper_100"></div>
    <div class="avatar_cropper_content_m"><img style="display:block;vertical-align: top;" src="http://cs617320.vk.me/v617320502/1a597/VH3HF-dXsJQ.jpg" data-img_min="cropper_50"></div>
    <div class="cropper_resylt" data-cropper_resylt="content"></div>
</div>

CSS

.popup_dialog_content {
    overflow: hidden;
    position: relative;
}

.avatar_cropper_content_a {
    padding: 20px;
    float: left;
}

.avatar_cropper_content_b {
    padding: 20px 20px 20px 0;
    float: right;
}

.crop-holder {
    text-align: left;
}

.crop-vline,
.crop-hline {
    font-size: 0;
    position: absolute;
}

.crop-vline {
    height: 100%;
    width: 1px;
}

.crop-hline {
    height: 1px;
    width: 100%;
}

.crop-handle {
    background: #E7EBF0;
    font-size: 1px;
    opacity: 0.6 !important;
    height: 10px;
    width: 10px;
}

.crop-tracker {
    height: 100%;
    width: 100%;
}

.crop-holder > div > div .crop-tracker:after {
    border-top: 2px dashed rgba(255, 255, 255, 0.5);
    content: '';
    left: 5%;
    margin-top: -1px;
    position: absolute;
    right: 5%;
    top: 50%;
    height: 0;
}

.crop-holder > div > div .crop-tracker:before {
    border-left: 2px dashed rgba(255, 255, 255, 0.5);
    bottom: 5%;
    content: '';
    left: 50%;
    margin-left: -1px;
    position: absolute;
    top: 5%;
    width: 0%;
}


/*
.crop-holder > div > div .crop-tracker:after {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
	border-top: 1px dashed rgba(255, 255, 255, 0.5);
	content: '';
	top: 33.33333%;
	position: absolute;
	height: 33.33333%;
	width: 100%;
	}
.crop-holder > div > div .crop-tracker:before {
	border-left: 1px dashed rgba(255, 255, 255, 0.5);
	border-right: 1px dashed rgba(255, 255, 255, 0.5);
	content: '';
	left: 33.33333%;
	position: absolute;
	height: 100%;
	width: 33.33333%;
	}
*/

.custom .crop-vline,
.custom .crop-hline {
    background: yellow;
}

.custom .crop-handle {
    background: #C7BB00;
    border-color: black;
    border-radius: 3px;
}

.avatar_cropper_content_l {
    border: 2px dashed #000000;
    overflow: hidden;
    height: 100px;
    width: 100px;
}

.avatar_cropper_content_l img {}

.avatar_cropper_content_m {
    border: 2px dashed #000000;
    margin: 20px 0;
    overflow: hidden;
    height:...

JavaScript

$.Dog_crop = function(obj, opt) {
    var obj = obj,
        opt = opt;

    if (typeof(obj) !== 'object') {
        obj = $(obj)[0];

    }

    if (typeof(opt) !== 'object') {
        opt = {};

    }

    if (!('trackDocument' in opt)) {
        opt.trackDocument = $.support.msie ? false : true;
        if ($.support.msie && $.support.version.split('.')[0] == '8') {
            opt.trackDocument = true;

        }

    }

    if (!('keySupport' in opt)) {
        opt.keySupport = $.support.msie ? false : true;

    }

    var defaults = {
        trackDocument: false,
        baseClass: 'crop',
        addClass: 'crop_f',

        bgColor: 'black',
        bgOpacity: .6,
        borderOpacity: .4,
        handleOpacity: .5,

        handlePad: 5,
        handleSize: 10,
        handleOffset: 5,
        edgeMargin: 14,

        aspectRatio: 0,
        keySupport: true,
        cornerHandles: true,
        sideHandles: true,
        drawBorders: true,
        dragEdges: true,

        boxWidth: 0,
        boxHeight: 0,

        boundary: 5,
        animationDelay: 20,
        swingSpeed: 3,

        allowSelect: true,
        allowMove: true,
        allowResize: true,

        minSelect: [0, 0],
        maxSize: [0, 0],
        minSize: [0, 0],

        onChange: function() {},
        onSelect: function() {}

    };

    var options = defaults;

    setOptions(opt);

    var $origimg = $(obj);
    var $img = $origimg.clone().removeAttr('id').css({
        position: 'absolute'
    });

    $img.width($origimg.width());
    $img.height($origimg.height());
    $origimg.after($img).hide();

    presize($img, options.boxWidth, options.boxHeight);

    var boundx = $img.width(),
        boundy = $img.height(),
        $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
            position: 'relative',
            backgroundColor: options.bgColor
        }).insertAfter($origimg).append($img);;

    if (options.addClass) {
       ...