Resizing and Cropping Images with Canvas. Modified

function resizeableImage(image_target, min_width, min_height) {
    this.init = function (image_target, min_width, min_height) {
        // When resizing, we will always use this copy of the original as the base
        this.min_width = typeof min_width !== 'undefined' ? min_width : 256;
        this.min_height = typeof min_height !== 'undefined' ? min_height : 256;
        this.image_target = jQuery(image_target).get(0);
        this.orig_src = new Image();
        this.event_state = {};
        this.constrain = false;
        this.resize_canvas = document.createElement('canvas');
        this.orig_src.src = image_target.src;

        // Wrap the image with the container and add resize handles
        jQuery($(image_target)).wrap('<div class="resize-container"></div>')
            .before('<span class="resize-handle resize-handle-nw"></span>')
            .before('<span class="resize-handle resize-handle-ne"></span>')
            .after('<span class="resize-handle resize-handle-se"></span>')
            .after('<span class="resize-handle resize-handle-sw"></span>');

        // Assign the container to a variable
        this.container = jQuery($(image_target)).parent('.resize-container');
        // Add events
        jQuery(this.container).on('mousedown touchstart', '.resize-handle', this.startResize.bind(this));
        jQuery(this.container).on('mousedown touchstart', 'img', this.startMoving.bind(this));
        this.overlay = jQuery(this.container).parent().children('.overlay')[0];
        this.offsetLeft = this.container.parent().offset().left + 3;
        this.offsetTop = this.container.parent().offset().top + 3;
    };

    this.startResize = function (e) {
        e.preventDefault();
        e.stopPropagation();
        this.saveEventState(e);
        jQuery($(document)).on('mousemove touchmove', this.resizing.bind(this));
        jQuery($(document)).on('mouseup touchend', this.endResize.bind(this));
    };

    this.endResize = function (e) {
        e.preventDefault();
        jQuery($(document)).off('mouseup touchend');
        jQuery($(document)).off('mousemove touchmove');
        this.crop();
    };

    this.saveEventState = function (e) {
        // Save the initial event details and container state
        this.event_state.container_width = this.container.width();
        this.event_state.container_height = this.container.height();
        this.event_state.container_left = this.container.offset().left;
        this.event_state.container_top = this.container.offset().top;
        this.event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + jQuery($(window)).scrollLeft();
        this.event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + jQuery($(window)).scrollTop();

        // This is a fix for mobile safari
        // For some reason it does not allow a direct copy of the touches property
        if (typeof e.originalEvent.touches !== 'undefined') {
            this.event_state.touches = [];
            $.each(e.originalEvent.touches, function (i, ob) {
                this.event_state.touches[i] = {};
                this.event_state.touches[i].clientX = 0 + ob.clientX;
                this.event_state.touches[i].clientY = 0 + ob.clientY;
            });
        }
        this.event_state.evnt = e;
    };

    this.resizing = function (e) {
        var mouse = {}, width, height, left, top;
        mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + jQuery($(window)).scrollLeft();
        mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + jQuery($(window)).scrollTop();

        // Position image differently depending on the corner dragged and constraints

        if ($(this.event_state.evnt.target).hasClass('resize-handle-se')) {
            width = mouse.x - this.event_state.container_left;
            height = mouse.y - this.event_state.container_top;
            left = this.event_state.container_left;
            top = this.event_state.container_top;
        } else if ($(this.event_state.evnt.target).hasClass('resize-handle-sw')) {
            width = this.event_state.container_width - (mouse.x - this.event_state.container_left);
            height = mouse.y - this.event_state.container_top;
            left = mouse.x;
            top = this.event_state.container_top;
        } else if ($(this.event_state.evnt.target).hasClass('resize-handle-nw')) {
            width = this.event_state.container_width - (mouse.x - this.event_state.container_left);
            height = this.event_state.container_height - (mouse.y - this.event_state.container_top);
            left = mouse.x;
            top = mouse.y;
            if (this.constrain || e.shiftKey) {
                top = mouse.y - ((width / this.orig_src.width * this.orig_src.height) - height);
            }
        } else if ($(this.event_state.evnt.target).hasClass('resize-handle-ne')) {
            width = mouse.x - this.event_state.container_left;
            height = this.event_state.container_height - (mouse.y - this.event_state.container_top);
            left = this.event_state.container_left;
            top = mouse.y;
            if (this.constrain || e.shiftKey) {
                top = mouse.y - ((width / this.orig_src.width * this.orig_src.height) - height);
            }
        }

        // Optionally maintain aspect ratio
        if (this.constrain || e.shiftKey) {
            height = width / this.orig_src.width * this.orig_src.height;
        }

        if ((width > this.min_width)
            && (height > this.min_height)
            && (left - this.offsetLeft <= this.overlay.offsetLeft)
            && (top - this.offsetTop <= this.overlay.offsetTop)
            && (left - this.offsetLeft + width >= this.overlay.offsetLeft + this.min_width)
            && (top - this.offsetTop + height >= this.overlay.offsetTop + this.min_height)) {
            // To improve performance you might limit how often resizeImage() is called
            this.resizeImage(width, height);
            // Without this Firefox will not re-calculate the the image dimensions until drag end
            this.container.offset({'left': left, 'top': top});
        }
    };

    this.resizeImage = function (width, height) {
        this.resize_canvas.width = width;
        this.resize_canvas.height = height;
        this.resize_canvas.getContext('2d').drawImage(this.orig_src, 0, 0, width, height);
        jQuery($(image_target)).attr('src', this.resize_canvas.toDataURL("image/png"));
    };

    this.startMoving = function (e) {
        e.preventDefault();
        e.stopPropagation();
        this.saveEventState(e);
        jQuery($(document)).on('mousemove touchmove', this.moving.bind(this));
        jQuery($(document)).on('mouseup touchend', this.endMoving.bind(this));
    };

    this.endMoving = function (e) {
        e.preventDefault();
        jQuery($(document)).off('mouseup touchend');
        jQuery($(document)).off('mousemove touchmove');
        this.crop();
    };

    this.moving = function (e) {
        var mouse = {}, touches;
        e.preventDefault();
        e.stopPropagation();

        touches = e.originalEvent.touches;

        mouse.x = (e.clientX || e.pageX || touches[0].clientX) + jQuery($(window)).scrollLeft();
        mouse.y = (e.clientY || e.pageY || touches[0].clientY) + jQuery($(window)).scrollTop();

        var left = mouse.x - ( this.event_state.mouse_x - this.event_state.container_left );
        var top = mouse.y - ( this.event_state.mouse_y - this.event_state.container_top);

        if (left - this.offsetLeft <= this.overlay.offsetLeft
            && top - this.offsetTop <= this.overlay.offsetTop
            && left + this.container.width() - this.offsetLeft >= this.overlay.offsetLeft + this.overlay.offsetWidth
            && top + this.container.height() - this.offsetTop >= this.overlay.offsetTop + this.overlay.offsetHeight) {
            this.container.offset({
                'left': left,
                'top': top
            });
        }
        // Watch for pinch zoom gesture while moving
        if (this.event_state.touches && this.event_state.touches.length > 1 && touches.length > 1) {
            var width = this.event_state.container_width, height = this.event_state.container_height;
            var a = this.event_state.touches[0].clientX - this.event_state.touches[1].clientX;
            a = a * a;
            var b = this.event_state.touches[0].clientY - this.event_state.touches[1].clientY;
            b = b * b;
            var dist1 = Math.sqrt(a + b);

            a = e.originalEvent.touches[0].clientX - touches[1].clientX;
            a = a * a;
            b = e.originalEvent.touches[0].clientY - touches[1].clientY;
            b = b * b;
            var dist2 = Math.sqrt(a + b);

            var ratio = dist2 / dist1;

            width = width * ratio;
            height = height * ratio;
            // To improve performance you might limit how often resizeImage() is called
            this.resizeImage(width, height);
        }
    };

    this.crop = function () {
        //Find the part of the image that is inside the crop box
        var crop_canvas,
            left = jQuery('.overlay').offset().left - this.container.offset().left,
            top = jQuery('.overlay').offset().top - this.container.offset().top,
            width = jQuery('.overlay').width(),
            height = jQuery('.overlay').height();

        crop_canvas = document.createElement('canvas');
        crop_canvas.width = width;
        crop_canvas.height = height;

        crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
        jQuery('*[name=' + image_target.name + '-crop]').val(crop_canvas.toDataURL("image/png"));
    };

    this.init(image_target, min_width, min_height);
    this.resizeImage(jQuery(this.container).parent().width(), jQuery(this.container).parent().height());

};