Jcrop.js

// Resources needed:
// Jcrop 	- http://deepliquid.com/content/Jcrop.html
// loadImage 	- https://github.com/blueimp/JavaScript-Load-Image

initJcrop: function (isEdit) {
	Page.elems.$photoWrapper.find('img').Jcrop({
		onChange: function (coo) {
			Page.vars.photoParams = coo;
		},
		onSelect: function (coo) {
			Page.vars.photoParams = coo;
		},
		aspectRatio: 1
	}, function(){
		Page.vars.bounds = this.getBounds();
		Page.vars.jcrop = this;
	});

	Page.vars.jcrop.setSelect(
		isEdit ?
		[
			Page.vars.photoParams.x,
			Page.vars.photoParams.y,
			Page.vars.photoParams.x2,
			Page.vars.photoParams.y2
		] :
		[
			Page.vars.bounds[0]/2 - 100,
			Page.vars.bounds[1]/2 - 100,
			Page.vars.bounds[0]/2 + 100,
			Page.vars.bounds[1]/2 + 100
		]
	);
},

loadPhoto: function (e) {
	loadImage(
		e.target.files[0],
		function (cvs) {
			if(cvs.type === "error") {
				ErrorPopup.methods.show('Произошла ошибка при загрузке картинки');
			} else {
				Page.elems.$photoBlock.addClass('edit-mode');

				var img = new Image();

				img.onload = function () {
					Page.elems.$photoWrapper.html($(this));
					Page.methods.initJcrop();
				};

				img.src = cvs.toDataURL();
			}
		},
		{
			maxWidth: 600,
			canvas: true
		}
	);
},

editPhoto: function () {
	Page.elems.$photoWrapper.find('img').removeAttr('style');
	Page.elems.$photoBlock.addClass('edit-mode');
	Page.methods.initJcrop(true);
},

savePhoto: function () {
	Page.vars.jcrop.destroy();

	Page.elems.$photoFormTop.val(Page.vars.photoParams.y);
	Page.elems.$photoFormLeft.val(Page.vars.photoParams.x);
	Page.elems.$photoFormSize.val(Page.vars.photoParams.w);

	Page.elems.$photoWrapper.find('img').css({
		marginTop: -Page.vars.photoParams.y,
		marginLeft: -Page.vars.photoParams.x
	});

	Page.elems.$photoBlock.removeClass('edit-mode');

	$(this).ajaxSubmit(); // submit form
},