10 Replies - 11029 Views - Last Post: 16 April 2011 - 02:32 PM

#1 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

How to crop, resize or rotate a loaded image?

Posted 27 March 2011 - 11:54 AM

Please help us.. How can I crop, resize or rotate a browsed/loaded image in a loader? I can already crop it but it's like crop & save together.. Is it possible to just crop it like the crop of MS Paint? or Facebook if possible? I can also save/download it already.. Here is the code I have .. Please help me..

package src 
{	
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.net.*;
	import flash.system.*;
	import fl.containers.UILoader; 
	
	import src.events.*;
	import src.image.*;
	import src.file.*;
	import src.load.*;
	import src.ui.*;
	
	import gs.TweenFilterLite;
	
	public class ImageCreator extends Sprite 
	{
		private var m_basePath  : String = 'http://localhost/xampp/image_encode_upload/deploy/';			
		private var m_uploadPath : String = 'uploads/';										
		private var m_outputPath : String = 'output/';									

		public function ImageCreator () 
		{
			Security.allowDomain( '*' );			
			Security.allowInsecureDomain( '*' );	
	
			m_isLocal = false;
			
			creating.visible = false;
			creating.alpha = 0;
			
			TweenFilterLite.delayedCall( 0.5, init );
		}
		
		public var upload : UIButton;						// upload button on .fla stage;
		public var rotate : UIButton;						// rotate button on .fla stage;
		public var download : UIButton;						// download button on .fla stage;
		public var create : UIButton;						// create button on .fla stage;
		public var clear : UIButton;						// clear button on .fla stage;
		public var creating : UILoader;						// creating screen ( shows while image is being saved to server ); 
		
		// output container;
		private var m_output : Sprite = new Sprite();		// container for image;
		private var m_mask : Sprite = new Sprite();			// mask for image container;
		private var m_progress : Sprite = new Sprite();		// upload / download indicator;
		private var m_effect : Scribble;					// covers image with random effect;

		// vars;
		private var m_isLocal : Boolean;					// determines if swf is on web server or local drive;
		private var m_fileMgr : FileManager;				// manages the opening & upload of local files;
		private var m_imagePHP : String = 'image.php';		// file that will manage image upload on your server;
		private var m_finalImage : String;					// final name of file on creation;
		private var m_imageQuality : Number = 90;			// jpeg or png export quality;
		private var m_capture : Sprite;						// set this equal to the sprite or movie clip that you wish to capture ( set to stage for entire movie );
		private var m_downloader : GraphicLoader;			// handles image download ( after upload is complete );
		private var m_imageExtension : String = '.jpg';		// jpeg image extension;
		
		private var angle:Number = Math.PI*2*(-45/360);		//45 degrees counter-clockwise
		private var rTx:Matrix = new Matrix();				//rotation matrix
		private var image:DisplayObject;					//UILoader content will contain an object of class DisplayObject;
		private var original:Matrix = new Matrix();			//the transform of the image DisplayObject before any transformations are applied
		private var w:Number;								//storage for the jpg's 'original' width
		
		public function get uploadPath () : String
		{
			return m_basePath + m_imagePHP;
		}
		
		public function get createPath () : String
		{
			return m_basePath + m_imagePHP;
		}
		
		public function get downloadPath () : String
		{
			return m_basePath + m_uploadPath;
		}
		
		public function get finalImagePath () : String
		{
			return m_basePath + m_outputPath + m_finalImage + m_imageExtension;
		}
		
		public function get captureContainer () : Sprite
		{
			return m_capture;
		}
	
		public function set captureContainer ( inContainer : Sprite ) : void
		{
			m_capture = inContainer;
		}

		private function onBrowse ( e : MouseEvent ) : void
		{
			m_fileMgr.browse();
		}
		
		private function onRotate ( e : MouseEvent ) : void
		{
			var Tx:Matrix = new Matrix();
			Tx.concat(rTx);
			Tx.scale(0.3, 0.3);
			image.transform.matrix = Tx;
		}
		
		private function onCaptureImage ( e : MouseEvent ) : void
		{			
			if ( captureContainer.width <= 1 && captureContainer.height <= 1 ) throw new Error( 'ERROR : no content to capture;' );
			
			TweenFilterLite.to( creating, 1, { autoAlpha : 1 } );
			
			captureImage();
		}
		
		private function onUploadProgress ( e : CustomEvent ) : void
		{
			trace( 'image uploading : ' + e.params.percent );
			
			m_progress.scaleX = e.params.percent;
		}
		
		private function onImageUploaded ( e : CustomEvent ) : void
		{			
			var dPath : String = String( downloadPath + e.params.fileName );
			
			trace( 'image ready for download at : ' + dPath );
			
			m_downloader.loadURL( dPath );
		}
		
		private function onDownloadProgress ( e : CustomEvent ) : void
		{
			trace( 'image downloading : ' + e.params.percent );
			
			m_progress.scaleX = 1 - e.params.percent;
		}
		
		private function onImageDownloaded ( e : CustomEvent ) : void
		{
			trace( 'image downloaded' );
			
			var clip : DraggableImage = new DraggableImage( new Bitmap( e.params.loaded.bitmapData.clone() ) );

			captureContainer.addChildAt( clip, captureContainer.getChildIndex( m_effect ) );
			
			showOptions();
		}
	
		private function onImageCreated ( e : Event ) : void 
		{
			trace( 'image created : ' + e );
						
			TweenFilterLite.to( creating, 1, { autoAlpha : 0 } );
			
		 	TweenFilterLite.to( download, 0.5, { autoAlpha : 1 } );
			
			image = creating.content;
			
			this.addChild(image);
									
			initMatrices();
			original = image.transform.matrix.clone();
			original.scale(0.4,0.4);
			image.transform.matrix = original;
			w = image.width;
		
			onDownloadImage();
		} 
		
		private function onDownloadImage ( e : MouseEvent = null ) : void
		{			
			m_fileMgr.download( finalImagePath, m_finalImage + m_imageExtension );
		}
		
		private function onImageCreationerror ( e : * ) : void 
		{
			trace( 'error : ' + e );
		}
		
		private function onUploadError ( e : CustomEvent ) : void
		{
			trace( 'upload error' );
		}
		
		private function onDownloadError ( e : ErrorEvent ) : void
		{
			trace( 'download error' );
		}
		
		private function onGetCapturedImage ( e : MouseEvent ) : void
		{
			m_fileMgr.download( finalImagePath, m_finalImage + m_imageExtension );
		}
		
		private function onClearAll ( e : MouseEvent ) : void
		{
			while ( captureContainer.getChildAt( 0 ) is DraggableImage ) delete captureContainer.removeChildAt( 0 );
			
			m_effect.reset();
			
			hideOptions();
		}
		
		private function initMatrices () : void
		{			
			rTx.translate(image.x - image.width/2, image.y -image.height/2);
			rTx.rotate(angle);
			rTx.translate(image.y + image.height/2, image.y + image.width/2);
		}
		
		private function init () : void
		{			
			addChildAt( m_output, 0 );
			
			if ( stage != null ) 
			{
				stage.align = StageAlign.TOP_LEFT;
				stage.scaleMode = StageScaleMode.NO_SCALE;
				
				with ( m_mask.graphics )
				{
					beginFill( 0x000000 );
					drawRect( 0, 0, stage.stageWidth, stage.stageHeight - 50 );
				}
				
				var border : Sprite = new Sprite();
				
				with ( border.graphics )
				{
					lineStyle( 0, 0x000000 );
					drawRect( 0, 0, stage.stageWidth - 1, stage.stageHeight - 51 );
				}
				
				addChildAt( border, numChildren - 1 );
			}
			
			with ( m_progress.graphics )
			{
				beginFill( 0x000000 );
				drawRect( 0, 0, upload.width, 1 );
			}
			
			addChild( m_progress );
			
			m_progress.x = 300;
			m_progress.y = 170;
			
			captureContainer = m_output;
			
			captureContainer.mask = m_mask;
			
			m_effect = new Scribble();
			
			captureContainer.addChild( m_effect );
			
			upload.show();
			
			m_progress.scaleX = 0;
			
			m_fileMgr = new FileManager( uploadPath, m_uploadPath );
			m_fileMgr.addEventListener( FileManager.ON_PROGRESS, onUploadProgress );
			m_fileMgr.addEventListener( FileManager.ON_UPLOAD_ERROR, onUploadError );
			m_fileMgr.addEventListener( FileManager.ON_IMAGE_UPLOADED, onImageUploaded );
			
			upload.addEventListener( MouseEvent.CLICK, onBrowse );
			rotate.addEventListener( MouseEvent.CLICK, onRotate );
			create.addEventListener( MouseEvent.CLICK, onCaptureImage );
			download.addEventListener( MouseEvent.CLICK, onDownloadImage );
			clear.addEventListener( MouseEvent.CLICK, onClearAll );
			
			var corner : Sprite = new Sprite();
			
			with ( corner.graphics )
			{
				beginFill( 0xFFFFFF, 0 );
				drawRect( 0, 0, 1, 1 );
			}
		
			captureContainer.addChild( corner );
			
			m_downloader = new GraphicLoader();
			m_downloader.addEventListener( GraphicLoader.ON_LOAD_PROGRESS, onDownloadProgress );
			m_downloader.addEventListener( GraphicLoader.ON_LOAD_COMPLETE, onImageDownloaded );
			m_downloader.addEventListener( ErrorEvent.ERROR, onDownloadError );
			
			hideOptions();
		}
		
		private function captureImage () : void
		{			
			var bmd : BitmapData = new BitmapData( m_mask.width, m_mask.height, true, 0xFFFFFFFF );
			
			bmd.draw( captureContainer, new Matrix(), null, null, null, true );
			
			var byteArray : ByteArray = new JPGEncoder( m_imageQuality ).encode( bmd );
			
			m_finalImage = getUniqueName();
			
			var urlRequest : URLRequest = new URLRequest();
			urlRequest.url = createPath + '?path=' + m_outputPath;
			urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
			urlRequest.method = URLRequestMethod.POST;
			urlRequest.data = UploadPostHelper.getPostData( m_finalImage + m_imageExtension, byteArray );
			urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

			var urlLoader : URLLoader = new URLLoader();
			urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
			urlLoader.addEventListener( Event.COMPLETE, onImageCreated );
			urlLoader.addEventListener( IOErrorEvent.IO_ERROR, onImageCreationerror );
			urlLoader.addEventListener( SecurityErrorEvent.SECURITY_ERROR, onImageCreationerror );
			urlLoader.load( urlRequest );
		}

		private function getUniqueName () : String
		{
			var d : Date = new Date();
			
			return d.getMonth() + 1 + '' + d.getDate() + '' + d.getHours() + '' + d.getMinutes() + ''  + d.getMilliseconds();
		}
		
		private function showOptions () : void
		{
			rotate.show();
			create.show();
			clear.show();
		}
	
		private function hideOptions () : void
		{
			rotate.hide();
			create.hide();
			clear.hide();
			download.hide();
		}
	}
}


Is This A Good Question/Topic? 0
  • +

Replies To: How to crop, resize or rotate a loaded image?

#2 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

Re: How to crop, resize or rotate a loaded image?

Posted 29 March 2011 - 08:26 AM

pleaseeeeee.. kindly help me flash professionals.. :D
Was This Post Helpful? 0
  • +
  • -

#3 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: How to crop, resize or rotate a loaded image?

Posted 29 March 2011 - 10:38 AM

Can you explain your problem more clearly...I guess you want to show the cropped image without actually cropping it.

You can do so by saving the coordinates of the rectangular portion of the image you want to show. And whenever your want to use the image just copy that rectangular part into a bitmap to get the cropped image.

You might want to check draw() and copyPixel() methods here. These will help you do cropping.
Was This Post Helpful? 0
  • +
  • -

#4 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

Re: How to crop, resize or rotate a loaded image?

Posted 31 March 2011 - 08:47 AM

View Postchinchang, on 29 March 2011 - 05:38 PM, said:

Can you explain your problem more clearly...I guess you want to show the cropped image without actually cropping it.

You can do so by saving the coordinates of the rectangular portion of the image you want to show. And whenever your want to use the image just copy that rectangular part into a bitmap to get the cropped image.

You might want to check draw() and copyPixel() methods here. These will help you do cropping.



Sir, kindly open this site http://www.picnik.com if you have time so you can see what I mean in cropping.. I would like to build a site like picknik, but not including all it's features.. I'm just starting and I would like to start with cropping, resizing and rotating an image.. Just the basic editing tools..

What I mean in cropping is, first you will choose what part of the image to crop and if you double click it, it will already be the image you want to edit or the image in the stage just like in picnik..

Please help me Sir Chinchang.. ^_^ If you want I can attach my files here so you can see what I've done..
Was This Post Helpful? 0
  • +
  • -

#5 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: How to crop, resize or rotate a loaded image?

Posted 01 April 2011 - 05:41 AM

Did you try experimenting with copyPixel() ?
Was This Post Helpful? 0
  • +
  • -

#6 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

Re: How to crop, resize or rotate a loaded image?

Posted 09 April 2011 - 02:40 PM

View Postchinchang, on 01 April 2011 - 12:41 PM, said:

Did you try experimenting with copyPixel() ?


not yet, coz it's not yet our vacation, I think next week i'll try experimenting with it.. i would just like to ask if you have seen picnik.com ? that's really our basis for the basic tools of editing ( crop, resize, rotate) .. heheh.. :D
Was This Post Helpful? 0
  • +
  • -

#7 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: How to crop, resize or rotate a loaded image?

Posted 10 April 2011 - 03:51 AM

Yup, I did. You can do the same stuff. Just try your hand on Bitmap Class and its functions. Play with it.

This post has been edited by chinchang: 10 April 2011 - 04:01 AM

Was This Post Helpful? 0
  • +
  • -

#8 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

Re: How to crop, resize or rotate a loaded image?

Posted 16 April 2011 - 10:08 AM

View Postchinchang, on 10 April 2011 - 10:51 AM, said:

Yup, I did. You can do the same stuff. Just try your hand on Bitmap Class and its functions. Play with it.


thanks for looking at picnik.com .. Uhmmm sir can you tell me what functions or codes will I use to do the following
Browsing Image --> Did i use the correct code above?
Crop -->
Resize -->
Rotate -->
and those other stuffs in picnik.com.. A BIG THANKS !
Was This Post Helpful? 0
  • +
  • -

#9 lordofduct  Icon User is offline

  • I'm a cheeseburger
  • member icon


Reputation: 2533
  • View blog
  • Posts: 4,633
  • Joined: 24-September 10

Re: How to crop, resize or rotate a loaded image?

Posted 16 April 2011 - 11:28 AM

The Bitmap class should have everything you need. And the examples on the page previously linked show off nearly all the functionality (I have to give it to adobe, their docs are really thorough).

linked again:
http://livedocs.adob...BitmapData.html


If you have specific questions about it once you start writing your code using that class, please come back and ask more precise questions.

But just asking:

"what functions or code will I use to do..."

Is against the DIC rules of no "give me the codez". We're happy to assist you, but we aren't going to just give you what you need.

This post has been edited by lordofduct: 16 April 2011 - 11:29 AM

Was This Post Helpful? 0
  • +
  • -

#10 thesis23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 29-January 11

Re: How to crop, resize or rotate a loaded image?

Posted 16 April 2011 - 01:36 PM

View Postlordofduct, on 16 April 2011 - 06:28 PM, said:

The Bitmap class should have everything you need. And the examples on the page previously linked show off nearly all the functionality (I have to give it to adobe, their docs are really thorough).

linked again:
http://livedocs.adob...BitmapData.html


If you have specific questions about it once you start writing your code using that class, please come back and ask more precise questions.

But just asking:

"what functions or code will I use to do..."

Is against the DIC rules of no "give me the codez". We're happy to assist you, but we aren't going to just give you what you need.



Thanks sir.. I'll just browse it and I'm sorry if you misunderstood my words.. What i mean is just the functions or methods on how will i do it, not the codes itself.. Hehehe.. I can't think of any word similar to functions and that's why i've typed codes.. Sorry ^^ ^_^
Was This Post Helpful? 0
  • +
  • -

#11 lordofduct  Icon User is offline

  • I'm a cheeseburger
  • member icon


Reputation: 2533
  • View blog
  • Posts: 4,633
  • Joined: 24-September 10

Re: How to crop, resize or rotate a loaded image?

Posted 16 April 2011 - 02:32 PM

There's a LOT of functions you are going to use. I'd end up just listing all the functions listed in that linked page. So read it... you'll need a good deal of them to accomplish the tasks you need.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1