`
xierh21
  • 浏览: 24122 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

裁剪图片

    博客分类:
  • FLEX
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="416" height="352" showCloseButton="true"
	creationComplete="init()" title="图片上传" xmlns:components="com.teamsun.framework.components.*" close="titlewindow1_closeHandler(event)">
		<mx:Script>
		<![CDATA[
			import com.flex3.events.WindowCloseEvent;
			import com.flex3.util.CommonFunctions;
			import com.teamsun.framework.common.pojo.Designcomponent;
			import com.teamsun.framework.design.ws.IDesigncomponentServiceWSRO;
			
			import flash.net.FileReference;
			
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;
			import mx.events.MoveEvent;
			import mx.graphics.codec.JPEGEncoder;
			import mx.managers.PopUpManager;
			import mx.rpc.events.ResultEvent;
		
		
			private var file: FileReference;
			private var size:String;
			private var fileName:String;
			private var filePath:String = "";
			private var request:URLRequest;
			
			public var comp:Designcomponent;
			
			
			private function init(): void{
				Security.allowDomain("*");
			}
			
			private function upload():void
			{
				file = new FileReference();
				file.addEventListener(Event.SELECT, file_selectHandler);
				file.addEventListener(Event.COMPLETE, file_completeHandler);
				file.browse(new Array(new FileFilter("图像文件 (*.jpg,*.gif,*.png)", "*.jpg; *.gif; *.png")));
			}
			
			private function file_selectHandler(event:Event):void
			{
				file.load();
			}
			
			private function file_completeHandler(event:Event):void
			{
				if (file.data.length>0)
				{
					picture.source = file.data;
				}
				else
				{
					CommonFunctions.showInfo("错误提示","图片加载错误!");
				}
			}
			
			
			private function cutPicture():void
			{
				var bx:Number = cutPictureBox.x - picture.x;
				var by:Number = cutPictureBox.y - picture.y ;
				var bw:Number = cutPictureBox.boxWidth ;
				var bh:Number = cutPictureBox.boxHeight ;
				var pictureBD:BitmapData = new BitmapData(picture.width, picture.height);
				pictureBD.draw(picture);
				var pixels:ByteArray = pictureBD.getPixels(new Rectangle(bx, by, bw, bh)); 
				pixels.position=0;
				var cutBD:BitmapData = new BitmapData(bw, bh);
				cutBD.setPixels(new Rectangle(0, 0, bw, bh), pixels);
				var sb:Bitmap = new Bitmap(cutBD);
				sb.smoothing = true;
				sb.pixelSnapping = PixelSnapping.ALWAYS;
				preImg.source = sb;
				
			}
			private function save():void
			{
				confimBtn.enabled = false;
				var picture:ByteArray = null;
				if (preImg.source is Bitmap)
				{
					var bitmapData:BitmapData = new BitmapData(preImg.width, preImg.height); 
					bitmapData.draw(preImg); 
					picture = new JPEGEncoder(100).encode(bitmapData);
					IDesigncomponentServiceWSRO.INSTANCE.updateComponentImg(comp,picture,on_updateComponentImg_handle,CommonFunctions.faultmethod);
				}
				else(preImg.source is ByteArray)
				{
					picture = preImg.source as ByteArray;
					IDesigncomponentServiceWSRO.INSTANCE.updateComponentImg(comp,picture,on_updateComponentImg_handle,CommonFunctions.faultmethod);
					
				} 
			}
			
			private function on_updateComponentImg_handle(event:ResultEvent):void
			{
				confimBtn.enabled = true;
				var reobj:Object = event.result;
				if(reobj)
				{
					if(reobj.isSuccued == true){
						var closeevent:WindowCloseEvent = new WindowCloseEvent(WindowCloseEvent.WINDOW_CLOSE);
						closeevent.IsConfirm = true;    
						closeevent.ReturnValue = reobj.value;
						dispatchEvent(closeevent);	
						PopUpManager.removePopUp(this);	
					}
					CommonFunctions.showInfo("提示",reobj.message);
				}else
				{
					CommonFunctions.showInfo("提示","操作失败!");
				}
			}
			
			protected function picture_completeHandler(event:Event):void
			{
				picture.x = 0;
				picture.y = 0;
				cutPictureBox.x = 0;
				cutPictureBox.y = 0;
			}
			
			protected function picture_ioErrorHandler(event:IOErrorEvent):void
			{
				CommonFunctions.showInfo("错误提示","图片加载错误!");
			}

			protected function titlewindow1_closeHandler(event:CloseEvent):void
			{
				PopUpManager.removePopUp(this);	
			}
			
			private var lockX:Number;
			private var lockY:Number;
			private var isMove:Boolean = false;
			protected function picture_mouseDownHandler(event:MouseEvent):void
			{
				isMove = true;
				lockX = event.localX;
				lockY = event.localY;
			}


			protected function picture_mouseMoveHandler(event:MouseEvent):void
			{
				if(isMove)
				{
					var tempX:Number =  event.localX - lockX;
					var tempY:Number = event.localY - lockY;
					picture.x += tempX;
					picture.y += tempY;
					
					cutPictureBox.x +=tempX;
					cutPictureBox.y +=tempY;
					
				}
			}


			protected function picture_mouseUpHandler(event:MouseEvent):void
			{
				if(!cutPictureBox.visible)
				{
					return;
				}
				isMove = false;
				cutPicture();
			}


			protected function picture_doubleClickHandler(event:MouseEvent):void
			{
				var tempX:Number =  cutPictureBox.boxWidth;
				var tempY:Number = cutPictureBox.boxHeight;
				if(( event.localX >= tempX/2) &&  (event.localX+tempX/2 <= picture.width))
					cutPictureBox.x = picture.x + event.localX - tempX/2;
				if(event.localY >= tempY/2 &&  (event.localY+tempY/2 <= picture.height))
					cutPictureBox.y = picture.y + event.localY- tempY/2;
				
				cutPicture();
			}


			protected function picture_updateCompleteHandler(event:FlexEvent):void
			{
				var temp:Number = picture.width;
				if(0 == temp)
					return ;
				if(picture.width < 65 || picture.height<65)
				{
					cutPictureBox.visible =false;
					preImg.source = file.data;
					
					picture.x = (imgCanvas.width-preImg.width)/2;
					picture.y = (imgCanvas.height-preImg.height)/2;
					
					picture.doubleClickEnabled= false;
					picture.removeEventListener(MouseEvent.MOUSE_DOWN,picture_mouseDownHandler);
					picture.removeEventListener(MouseEvent.MOUSE_MOVE,picture_mouseMoveHandler);
					picture.removeEventListener(MouseEvent.DOUBLE_CLICK,picture_doubleClickHandler);
					picture.removeEventListener(MouseEvent.MOUSE_UP,picture_mouseUpHandler);
					return ;
				}else
				{
					picture.doubleClickEnabled=true;
					picture.addEventListener(MouseEvent.MOUSE_DOWN,picture_mouseDownHandler);
					picture.addEventListener(MouseEvent.MOUSE_MOVE,picture_mouseMoveHandler);
					picture.addEventListener(MouseEvent.DOUBLE_CLICK,picture_doubleClickHandler);
					picture.addEventListener(MouseEvent.MOUSE_UP,picture_mouseUpHandler);
					
				}
				cutPictureBox.visible =true;
			}

		]]>
		</mx:Script>

		<mx:HBox height="100%" width="100%" >
			<mx:VBox  height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
				<!--<components:ScaleLabels id="scale"/>-->
				<mx:Canvas width="256" height="256" left="10" id="imgCanvas" top="40" borderThickness="1" borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off">
					<mx:Image id="picture" 
							  smoothBitmapContent="true" updateComplete="picture_updateCompleteHandler(event)"
							  complete="picture_completeHandler(event)"
							  ioError="picture_ioErrorHandler(event)"/>
					<components:ScaleBox id="cutPictureBox"
										 cutObject="{picture}" visible="false"
										 boxWidth="64" boxHeight="64"
 										 cut="cutPicture()" x="64" y="55"/>
				</mx:Canvas>
			</mx:VBox>
			<mx:VBox  height="100%" width="120" verticalAlign="middle" horizontalAlign="center">
				<mx:VBox height="256" width="100" verticalAlign="middle" horizontalAlign="center" verticalGap="15" borderStyle="solid" borderThickness="1"
						 paddingBottom="8" paddingTop="8" paddingRight="8">
					<!--<mx:Label text="图片大小在64*64显示效果最佳" />-->
					<mx:Label text="图像预览:" />
					<mx:Canvas width="64" height="64" borderThickness="1" borderStyle="solid">
						<mx:Image id="preImg" width="100%" height="100%"/>
					</mx:Canvas>
					<mx:Label text="64×64" />
					<mx:Button id="loadBtn" click="upload();" label="本地上传"/>
				</mx:VBox>
			</mx:VBox>
			
		</mx:HBox>
		<mx:ControlBar horizontalAlign="right">
			<mx:Button label="确定" click="save();" id="confimBtn"/>
			<mx:Button label="关闭" click="titlewindow1_closeHandler(null)"/>
		</mx:ControlBar>
</mx:TitleWindow>
分享到:
评论

相关推荐

    C# 像PS一样裁剪原图片,鼠标拖动裁剪图片

    在这个特定的项目中,我们关注的是如何实现“像PS一样裁剪原图片”,即在C#环境中模仿Photoshop的裁剪功能,允许用户通过鼠标拖动来裁剪图片。这涉及到图像的选取、坐标计算、缩放以及纠偏、亮度和对比度调整等技术...

    android 自定义比例裁剪图片(拍照 相册)方式 16:9 10:7 自定义

    在裁剪图片时,我们通常会使用`ACTION_IMAGE_CAPTURE`和`ACTION_PICK`这两个Intent。 1. **拍照裁剪** - 当用户需要通过相机拍照并立即裁剪时,我们创建一个`ACTION_IMAGE_CAPTURE` Intent,并通过`EXTRA_OUTPUT`...

    java处理裁剪图片(更改图片大小)

    在Java编程中,处理图像操作是一项常见的任务,其中包括裁剪图片和更改图片尺寸。下面将详细介绍这三种方法。 首先,我们来谈谈使用第三方工具ImageMagick。ImageMagick是一款强大的命令行工具,能够处理各种图像...

    HTML5 canvas 图片裁剪 图片裁切

    开发者通过原创的方式实现了这一功能,使得用户能够在浏览器中方便地裁剪图片,尤其是结合九宫格模式,增加了裁剪的灵活性和趣味性。 总之,HTML5的canvas为图片裁剪提供了强大的支持,结合JavaScript的动态交互...

    WinForm在PictrueBox控件上建立矩形选框裁剪图片

    在Windows Forms(WinForm)开发环境中,我们经常需要处理图像操作,例如裁剪图片。本教程将详细讲解如何在PictureBox控件上实现一个简单的矩形选框裁剪功能。首先,我们需要了解WinForm的基本概念以及PictureBox...

    js裁剪图片代码

    图片裁剪是网页中常见的交互功能,用户可以通过拖动选择区域或者调整比例来裁剪图片,以满足特定尺寸或展示需求。这种技术尤其在上传头像、产品图片或其他需要个性化定制的场景中非常实用。 实现js裁剪图片的核心...

    iOS裁剪图片,抠图,比例裁剪

    裁剪图片的核心是使用`CGImage`和`CGAffineTransform`。首先,我们可以用`UIImage`的`CGImage`属性获取图片的原始CGImage对象,然后通过设置裁剪区域的转换矩阵(`CGAffineTransformMakeRect`)来确定裁剪范围。最后...

    选择图片,拍照或从相机选择并裁剪图片

    总结起来,实现“选择图片,拍照或从相机选择并裁剪图片,且显示出来”的功能,涉及到的关键技术点包括:使用Intent调用系统服务、处理返回结果、图片裁剪、以及图片显示。在实际开发中,根据不同的平台(Android、...

    Qt编写的裁剪图片软件

    这个"Qt编写的裁剪图片软件"显然是一个利用Qt库实现的图形用户界面(GUI)应用程序,专门用于对图像进行裁剪操作。 在描述中提到的"可以拖动矩形框进行图片裁剪",这是Qt中的关键功能之一。Qt提供了丰富的图形视图...

    Asp版的裁剪图片

    标题中的"Asp版的裁剪图片"指的是使用Asp技术来开发一个能够处理图片裁剪的系统。这个系统允许用户上传图片,并根据需求裁剪成特定尺寸或比例,以便于后续的展示或存储。这种功能对于网站设计、内容管理以及用户个性...

    使用Android系统调用裁剪图片并保存demo

    以上就是使用Android系统调用裁剪图片并保存的整个流程。这个功能涉及到了Intent的交互、图片选择、图片裁剪以及文件操作等多个知识点,对于Android开发者来说是必备技能之一。在实际项目中,还可以根据需求添加更多...

    ios拍照后按范围裁剪图片demo

    在iOS开发中,实现“ios拍照后按范围裁剪图片demo”涉及到多个关键知识点,主要集中在用户界面(UI)设计、图像处理以及照片权限管理。下面将详细解释这些技术要点。 首先,我们要创建一个自定义的拍照页面。这通常...

    word2021如何裁剪图片.docx

    本文将详细介绍如何在Word 2021中裁剪图片,包括准备工作、具体步骤、操作技巧和实际应用,帮助用户更好地掌握这项功能。 在进行图片裁剪之前,准备工作是必不可少的一步。用户需要确保图片的环绕方式不是嵌入型,...

    简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪

    - **裁剪图片**:允许用户设定裁剪区域,从而精确地选择需要保留的图像部分。 - **放大缩小**:提供了缩放功能,让用户在不同尺度下查看和裁剪图片。 - **上下左右移动**:图像可以在水平和垂直方向上自由移动,...

    裁剪图片,通过imageView显示

    本文将详细讲解如何裁剪图片并使用`imageView`显示。我们将探讨以下几个方面: 1. **裁剪图片** - **Intent选择器**:Android提供了`Intent`来启动系统内置的图片裁剪功能。首先,我们需要创建一个`Intent`,指定...

    VB裁剪图片

    在VB(Visual Basic)...总的来说,VB实现裁剪图片的关键在于理解`Bitmap`和`Graphics`类的用法,以及如何利用`Clone`方法进行像素级别的操作。通过熟练掌握这些知识点,你可以创建出一个强大而灵活的图片编辑工具。

    jQuery点击头像上传本地预览裁剪图片

    在IT领域,尤其是在Web开发中,用户界面的交互性至关重要,而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性...

    图片按照指定宽度或者高度等比例压缩图片以及裁剪图片

    "图片按照指定宽度或高度等比例压缩图片以及裁剪图片"这个主题涉及到图像处理的关键技术,包括图像缩放和裁剪。接下来,我们将深入探讨这两个概念。 首先,**等比例压缩图片**是保持图片原有宽高比的情况下调整图片...

    H5实现裁剪图片并上传

    3. **裁剪图片**:通过Croppe插件提供的API设置裁剪参数,如裁剪区域的宽高比、位置等。当用户完成裁剪后,调用插件的裁剪方法获取裁剪后的图片数据。 4. **转换为上传格式**:由于服务器通常不接受Canvas的位图...

    批量裁剪图片程序

    该程序用于裁剪图片,在深度学习领域前期处理数据能够用到

Global site tag (gtag.js) - Google Analytics