Dojo Image Cropper

HTML

<div id="resultContainer" style="width:80px; height: 60px; margin:5px; overflow:hidden;">
<img id="resultImg" src="http://image.noelshack.com/fichiers/2017/35/5/1504274632-aa6.jpg"/>
</div>

CSS

.image-cropper .crop-node {
    width: 100px;
    height: 100px;
    border: 1px dotted #999;
    position: absolute;
    left:0;
    top: 0;
    cursor: move;
}
.image-cropper .crop-node img {
    position: absolute;
    z-index: 100;
    width: 5px;
    height: 5px;
    border: 1px solid #ccc;
    background: url(images/small_square.gif) no-repeat 0 0;
    
}
.image-cropper .crop-node img.lt{cursor: nw-resize; left:-4px; top: -4px;}
.image-cropper .crop-node img.t{cursor: s-resize; top: -4px; }
.image-cropper .crop-node img.rt{cursor: ne-resize; right: -4px; top: -4px;}
.image-cropper .crop-node img.r{cursor: e-resize; right: -4px;}
.image-cropper .crop-node img.rb{cursor: se-resize; right: -4px; bottom: -4px;}
.image-cropper .crop-node img.b{cursor: s-resize; bottom: -4px;}
.image-cropper .crop-node img.lb{cursor: sw-resize; left: -4px; bottom: -4px;}
.image-cropper .crop-node img.l{cursor: e-resize; left: -4px;}

.image-cropper .block    {    position: absolute; opacity:0.5; z-index: 50;background-color: #000;}
.image-cropper .block-l    {    left:0; top: 149px; width: 149px; height: 102px;}
.image-cropper .block-t    {    top:0; width: 100%; height: 149px;}
.image-cropper .block-r    {    right:0; top: 149px; width: 149px; height: 102px;}
.image-cropper .block-b    {    bottom:0; width: 100%; height: 149px;}

.image-cropper{
    border: 0px solid #aaa;
    position: relative;
    background: green;
}
.image-cropper > img{}

JavaScript

dojo.require('dijit._Widget');
function updateResult(info){
    //update the result image by cropped size
    var resultImg = dojo.byId('resultImg');
    var rate =  80/info.w;
    dojo.style(resultImg , {
        width: info.cw*rate + 'px'
        ,height:info.ch*rate + 'px'
        ,marginLeft: -info.l*rate + 'px'
        ,marginTop: -info.t*rate + 'px'
    });
}
dojo.ready(function() {
    defineDijit();//Demo purpose: to define dijit
    var ic = new dojoy.ImageCropper({
        keepSquare: true
        ,cropSize:80
    });
    ic.placeAt(dojo.body(), 'last');
    ic.setImage('http://image.noelshack.com/fichiers/2017/35/5/1504274632-aa6.jpg');
    dojo.connect(ic, 'onChange', updateResult);
    updateResult(ic.getInfo());
});


function defineDijit(){
    
    dojo.declare('dojoy.ImageCropper', dijit._Widget, {
        minWidth: 136,
        minHeight: 102,
        //gap between crop region border and container border
        gap: 50,
        //the initial crop region size
        cropSize: 0,
        //whether to keep crop region as a square
        keepSquare: false,
        postCreate: function() {
            this.inherited(arguments);
            this.updateUI();
            this.connect(this.cropNode, 'onmousedown', '_onMouseDown');
            this.connect(document, 'onmouseup', '_onMouseUp');
            this.connect(document, 'onmousemove', '_onMouseMove');
            document.ondragstart = function() {
                return false;
            }
            dojo.setSelectable(this.domNode, false);
            dojo.addClass(this.domNode, 'image-cropper');
            if (this.image) this.imageNode = dojo.create('img', {
                src: this.image
            }, this.domNode, 'first');
        }

        ,
        buildRendering: function() {
            this.inherited(arguments);
            this._archors = {};
            this._blockNodes = {};

            this.cropNode = dojo.create('div', {
                className: 'crop-node'
           ...