Dojo Image Cropper

by supnate

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');

dojo.ready(function() {
    defineDijit();//Demo purpose: to define dijit
    var ic = new dojoy.ImageCropper({
        keepSquare: false
    });
    ic.placeAt(dojo.body(), 'last');
    ic.setImage('http://articles.csdn.net/uploads/allimg/101111/I_11111504503106.jpg');
});


function defineDijit(){
    
    dojo.declare('dojoy.ImageCropper', dijit._Widget, {
        minWidth: 20,
        minHeight: 20,
        //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'
            }, this.domNode, 'last');

            var arr = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'];
            for (var i = 0; i < 8; i++) {
                var img = dojo.create('img', {
                    className: arr[i]
                });
                img.src = this._blankGif;
                this.cropNode.appendChild(img);
                this._archors[arr[i]] = img;
            }

            arr = ['l', 't', 'r', 'b'];
  ...