image_editor_general.js

jquery+prototype+插件+源码+资料 非常的东西

/*
	* author: Logan Cai
	* Email: cailongqun [at] yahoo [dot] com [dot] cn
	* Website: www.phpletter.com
	* Created At: 21/April/2007
*/

	/**
	*	get current selected mode value
	*/
	function getModeValue()
	{
		//check if an mode has been selected or selected first one be default
		var CheckedElem = null;
		for(var i = 0; i < document.formAction.mode.length; i++)
		{
			if(document.formAction.mode[i].checked || i == 0)
			{
				CheckedElem = document.formAction.mode[i];
			}
		}
		CheckedElem.checked = true;	
		return CheckedElem.value;
	};
	/**
	*	get fired when mode changed
	*	fire according function
	*/
	function changeMode(restore, force)
	{
		
			var mode = getModeValue();
			var imageMode = $('#image_mode');
			if(mode != $(imageMode).val() || (typeof(restore) == "boolean"))
			{
				/**
				* confirm it when there has been some changes before go further
				*/
				if(isImageHistoryExist() || typeof(force) == 'boolean')
				{
					if(typeof(restore) == "boolean" || typeof(force) == 'boolean' )
					{
						if(!restoreToOriginal(restore))
						{
							return false;
							
						}
						clearImageHistory();
					}
					else if(!window.confirm(warningLostChanges))
					{
						cancelChangeMode();
						return false;
					}else
					{
						restoreToOriginal(false);						
						clearImageHistory();
					}				
				}else if((typeof(restore) == "boolean" && restore))
				{
					return false;	
				}
				initPositionHandler();				
				switch(mode)
				{
					case "resize":
						switch($('#image_mode').val())
						{
							case "crop":
								disableCrop();								
								break;
							case "rotate":
								disableRotate();
								break;
							case "flip":
								disableFlip();
								break;								
							default:
								disableRotate();
						}						
						enableResize(document.formAction.constraint.checked);
						break;
					case "crop":						
						switch($('#image_mode').val())
						{
							case "resize":
								disableResize();								
								break;
							case "rotate":
								disableRotate();
								break;
							case "flip":
								disableFlip();
								break;								
							default:
								disableRotate();
						}	
						enableCrop();
						
						break;
					case "rotate":
						switch($('#image_mode').val())
						{
							case "resize":
								disableResize();								
								break;
							case "crop":
								disableCrop();
								break;
							case "flip":
								disableFlip();
								break;
							default:
								//do nothing
						}						
						enableRotate();
						break;	
					case "flip":
						switch($('#image_mode').val())
						{
							case "resize":
								disableResize();								
								break;
							case "crop":
								disableCrop();
								break;
							case "rotate":
								disableRotate();
								break;
							default:
								//do nothing
						}								
						enableFlip();
						break;
					default:
						alert('Unexpected Operation!');
						return false;			
				}
				$('#image_mode').val(mode);
			}

	};
	
	
	function resetEditor()
	{
		if(isImageHistoryExist())
		{
			changeMode(true);
		}else
		{
			alert(warningResetEmpty);
		}
		return false;
		
	};

	/**
	*	enable to crop function
	*/
	function enableCrop()
	{
		var widthField = $('#width');
        var heightField = $('#height');
        var topField = $('#y');
        var leftField = $('#x');
        var imageToResize = getImageElement();
        var imageWidth = $(imageToResize).attr('width');
        var imageHeight = $(imageToResize).attr('height');

        var overlay = $('#resizeMe');
        var imageContainer = $('#imageContainer');
		var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
		var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));
        //Init Container
        $(imageContainer).css('width', imageWidth + 'px');
        $(imageContainer).css('height', imageHeight + 'px');
        $(imageToResize).css('opacity', '.5');
		
        //Init Overlay
        overlay.css('background-image', 'url('+ $(imageToResize).attr('src')+')');
        overlay.css('width', imageWidth + 'px');
        overlay.css('height', imageHeight + 'px');

        //Init Form
        widthField.val(imageWidth);
        heightField.val(imageHeight);
        topField.val(0);
        leftField.val(0);		
	    $(overlay).Resizable(
			{
				minWidth: 10,
				minHeight: 10,
				maxWidth: imageWidth,
				maxHeight: imageHeight,
				minTop: imageContainerTop,
				minLeft: imageContainerLeft,
				maxRight: (parseInt(imageWidth) + imageContainerLeft),
				maxBottom: (parseInt(imageHeight) + imageContainerTop),
				dragHandle: true,
				onDrag: function(x, y)
				{
					this.style.backgroundPosition = '-' + (x - imageContainerLeft) + 'px -' + (y - imageContainerTop) + 'px';
					$(topField).val(Math.round(y - imageContainerTop));
					$(leftField).val(Math.round(x - imageContainerLeft));
					addImageHistory();
				},
				handlers: {
					se: '#resizeSE',
					e: '#resizeE',
					ne: '#resizeNE',
					n: '#resizeN',
					nw: '#resizeNW',
					w: '#resizeW',
					sw: '#resizeSW',
					s: '#resizeS'
				},
				onResize : function(size, position) {
					this.style.backgroundPosition = '-' + (position.left - imageContainerLeft) + 'px -' + (position.top - imageContainerTop) + 'px';
					$(widthField).val(Math.round(size.width));
					$(heightField).val(Math.round(size.height));
					$(topField).val(Math.round(position.top - imageContainerTop));
					$(leftField).val(Math.round(position.left - imageContainerLeft));
					addImageHistory();
					$('#ratio').val($(overlay).ResizableRatio() );	
				}
			}
		);
		enableConstraint();
		toggleConstraint();
		disableRotate();
		
	};
	/*
	*	disable crop function 
	*/	
	function disableCrop()
	{
		$('#resizeMe').ResizableDestroy();		
		hideHandlers();					
	};
	/**
	*	disable resize function
	*/
	function disableResize()
	{
		$('#resizeMe').ResizableDestroy();
		
		hideHandlers();					
	};
	/**
	*	hide all handlers 
	*/	
	function hideHandlers()
	{
		$('#resizeSE').hide();
		$('#resizeE').hide();
		$('#resizeNE').hide();	
		$('#resizeN').hide();
		$('#resizeNW').hide();
		$('#resizeW').hide();	
		$('#resizeSW').hide();
		$('#resizeS').hide();	
	};
	/**
	*
	*	enable to resize the image
	*/
	function enableResize(constraint)
	{
		hideHandlers();
		var imageToResize = getImageElement();	
		var imageContainer = $('#imageContainer');
		var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
		var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));		
		var resizeMe = $('#resizeMe');
		var width = $('#width');
		var height = $('#height');
		//ensure the container has same size with the image
		$(imageContainer).css('width', $(imageToResize).attr('width') + 'px');
		$(imageContainer).css('height', $(imageToResize).attr('height') + 'px');
		$(resizeMe).css('width', $(imageToResize).attr('width') + 'px');
		$(resizeMe).css('height', $(imageToResize).attr('height') + 'px');
		$('#width').val($(imageToResize).attr('width'));
		$('#height').val($(imageToResize).attr('height'));
		$('#x').val(0);
		$('#y').val(0);		
		$(resizeMe).Resizable(
			{
				minWidth: 10,
				minHeight: 10,
				maxWidth: 2000,
				maxHeight: 2000,
				minTop: imageContainerTop,
				minLeft: imageContainerLeft,
				maxRight: 2000,
				maxBottom: 2000,
				handlers: {
					s: '#resizeS',
					se: '#resizeSE',
					e: '#resizeE'
				},
				onResize: function(size)
				{
					$(imageToResize).attr('height', Math.round(size.height).toString());
					$(imageToResize).attr('width', Math.round(size.width).toString());
					$(width).val(Math.round(size.width));
					$(height).val(Math.round(size.height));		
					$(imageContainer).css('width', $(imageToResize).attr('width') + 'px');
					$(imageContainer).css('height', $(imageToResize).attr('height') + 'px');	
					$('#ratio').val($(resizeMe).ResizableRatio() );			
					addImageHistory();				
				}

			}
		);	
		$(resizeMe).ResizeConstraint(constraint);
		if(typeof(constraint) == 'boolean' && constraint)
		{		
			$('#resizeS').hide();
			$('#resizeE').hide();			
		}else
		{			
			$('#resizeS').show();
			$('#resizeE').show();
		}		
		$('#resizeSE').show();
		$('#ratio').val($(resizeMe).ResizableRatio() );	
			
			
	};
	/**
	*	initiate the position of handler
	*/
	function initPositionHandler()
	{
		var widthField = $('#width');
        var heightField = $('#height');
        var topField = $('#x');
        var leftField = $('#y');

        var imageToResize = getImageElement();
        var imageWidth = $(imageToResize).attr('width');
        var imageHeight = $(imageToResize).attr('height');

        var overlay = $('#resizeMe');
        var imageContainer = $('#imageContainer');
		var imageContainerTop = parseInt($(imageContainer).css('top').replace('px', ''));
		var imageContainerLeft = parseInt($(imageContainer).css('left').replace('px', ''));
        //Init Container
        $(imageContainer).css('width', imageWidth + 'px');
        $(imageContainer).css('height', imageHeight + 'px');
		
        //Init Overlay
		$(imageToResize).css('opacity', '100');
        $(overlay).css('width', imageWidth + 'px');
        $(overlay).css('height', imageHeight + 'px');
		$(overlay).css('background-image', '');
		$(overlay).css('backgroundPosition', '0 0');
		$(overlay).css('left', imageContainerLeft);
		$(overlay).css('top', imageContainerTop);

        //Init Form
        $(widthField).val(imageWidth);
        $(heightField).val(imageHeight);
        $(topField).val(0);
        $(leftField).val(0);
		$('#angle').val(0);
		$('#flip_angle').val('');
	};
	/**
	*	enable rotate function
	*/
	function enableRotate()
	{
		hideHandlers();
	toggleDisabledButton('actionRotateLeft', false);
	toggleDisabledButton('actionRotateRight', false);			
		
	};
	/**
	*	disable rotation function
	*/
	function disableRotate()
	{
	toggleDisabledButton('actionRotateLeft', true);
	toggleDisabledButton('actionRotateRight', true);			
	};
	
	function enableConstraint()
	{
		$('#constraint').removeAttr('disabled');
	};
	
	function disableConstraint()
	{
		$('#constraint').attr('disabled', 'disabled');
	};
	function ShowHandlers()
	{
		$('#resizeSE').show();
		$('#resizeE').show();
		$('#resizeNE').show();	
		$('#resizeN').show();
		$('#resizeNW').show();
		$('#resizeW').show();	
		$('#resizeSW').show();
		$('#resizeS').show();	
	}	;
	
	/**
	*	turn constraint on or off
	*/
	function toggleConstraint()
	{
		hideHandlers();	
		if(document.formAction.constraint.checked)
		{
			$('#resizeMe').ResizeConstraint(true);
			switch(getModeValue())
			{
				case "resize":
					$('#resizeSE').show();	
					break;
				case "crop":
					$('#resizeSE').show();
					$('#resizeNE').show();	
					$('#resizeNW').show();
					$('#resizeSW').show();
					
					break;
				case "rotate":
					break;
			}
						
		}else
		{