关于使用Flex中图片处理

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:astion="astions.*"
			   minWidth="955" minHeight="600"
			   creationComplete="init()" xmlns:astion1="astion.*">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<s:Parallel id="imgEffect" target="{showPic}">
			<s:Move xFrom="0" xTo="0"  yFrom="0" yTo="0" duration="1000" />
			<s:Scale scaleXFrom="1.0" scaleXTo="1.5" scaleYFrom="1.0" scaleYTo="1.5" duration="1000" />
		</s:Parallel>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MoveEvent;
			import mx.graphics.ImageSnapshot;
			import mx.graphics.codec.JPEGEncoder; 
			
			private var _file:FileReference;              //  单个图片列表
			private var _fileList:FileReferenceList     //  批量图片列表
			private var isChoice:Boolean;                   //  是否裁剪图片
			//  private var imgData:BitmapData;             //  图片bitmap数据
			
			private function init():void
			{
				_file = new FileReference();
				_fileList = new FileReferenceList();
				_file.addEventListener(Event.SELECT, onSelect);
				_file.addEventListener(Event.COMPLETE, completeHandle);
				box.visible = false;
				isChoice = false;
				group_all.visible = false;
			}
			//  单击选择时
			private function select():void
			{
				var allTypes:FileFilter = new FileFilter("图片类型(*.jpg; *.jpeg; *.png; *.gif)", "*.jpg; *.jpeg; *.png; *.gif");
				_file.browse([allTypes]);
			}
			//  图片被选中时
			private function onSelect(e:Event):void
			{
				_file.load();
			}
			//  图片加载完成时
			private function completeHandle(e:Event):void
			{
				showPic.source = _file.data;
				showPic.width = 400;
				showPic.height = 400;
			}
			//  图片裁剪
			private function cut():void
			{
				if( showPic.source != null) {
				isChoice = true;
				box.visible = true;
				group_all.visible = true;
				uncheckArea();
				}
			}
			//  裁剪图片时,未选中部分变暗
			private function uncheckArea():void {
				//  盒子的宽度
				var boxWidth:int = box.boxWidth; 
				//  盒子的高度
				var boxHeight:int = box.boxHeight;
				//  盒子的坐标
				var originX:int = box.x;
				var originY:int = box.y;
				//  图片显示区域的高,宽
				var imgHeight:int =showPic.height;
				var imgWidth:int = showPic.width;
				//bg_1      加上10PX像素文字的高度
				bg_1.height = originY -30;
				bg_1.width = imgWidth;
				bg_1.x = 0;
				bg_1.y = 0;
				//  bg_2
				bg_2.height = boxHeight;
				bg_2.width = imgWidth - (originX + boxWidth);
				bg_2.x = originX + boxWidth;
				bg_2.y = originY-30;
				//  bg_3      减去10PX像素文字的高度    减去 30PX按钮栏的高度
				bg_3.height = imgHeight - (originY +boxHeight-30);
				bg_3.width = bg_1.width = imgWidth;
				bg_3.x = 0;
				bg_3.y = originY + boxHeight - 30;
				//  bg_4
				bg_4.height = boxHeight;
				bg_4.width = originX;
				bg_4.x = 0;
				bg_4.y = originY - 30;
				
				//  bg_2.height = bg_4.height = imgHeight - (bg_3.height + bg_1.height);
			}
			//  单击预览时.  返回被选中的区域 bitmapdata;
			private function preview():BitmapData
			{
				showSmallPic.source = "";
				var bmpData:BitmapData = ImageSnapshot.captureBitmapData(showPic);
				var re:Rectangle = new Rectangle(box.x, box.y, box.boxWidth, box.boxHeight);
				var byte:ByteArray = bmpData.getPixels(re);
				//  已经定义为全局变量,方便数据的存储操作。
               //  var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);
				var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);       
				//当前的bytearray.position为最大长度,要设为从0开始读取
				byte.position = 0; 
				var imgRe:Rectangle = new Rectangle(0, 0, box.boxWidth, box.boxHeight);
				imgData.setPixels(imgRe, byte);
				showSmallPic.source = new Bitmap(imgData);
				return imgData;
				/*
				var bmpData_2:BitmapData = new BitmapData(100, 100);
				var p:Point = new Point(40, 40);
				var area:Rectangle = new Rectangle(0, 0, 100, 100);
				//  bmpData_2.draw(bmpData, new Matrix());
				bmpData_2.copyPixels(bmpData, area, p);
				var bmp:Bitmap = new Bitmap(bmpData_2);
				showSmallPic.source = bmp;
				*/
			}
			//  图片保存
			private function save():void
			{
				var imgData:BitmapData = preview();
				if(!isChoice) {
					Alert.show("没有预览图片", "提示信息");
					return;
				}
				if(imgData != null)
				{
					var file:FileReference = new FileReference();
					var date:Date = new Date();
					var ba:ByteArray = new JPEGEncoder().encode(imgData);
					file.save(ba, date.fullYear.toString() + date.month.toString() + date.day.toString() + date.milliseconds.toString() + ".jpg");
				} else {
					Alert.show("保存出错!请重试", "提示信息");
				}
			}
			
			protected function showPic_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				//  imgEffect.play(null, false);
				showPic.width = 400;
				showPic.height = 400;
				showPic.setStyle("backgroundAlpha", 0.6);
				showPic.graphics.lineStyle(1, 0, 100);
				showPic.graphics.lineTo(100, 0);
				showPic.graphics.lineTo(100, 50);
				showPic.graphics.lineTo(0, 50);
				showPic.graphics.lineTo(0, 0);
			}
			
			//  图片修改时防止操作图片的界限
			protected function box_moveHandler():void
			{
				//  当选区X坐标小于图片的X坐标时   左部
				if(box.x < showPic.x) {
					box.x = showPic.x;
				}
				//  当选区Y坐标小于图片的Y坐标时     顶部
				if(box.y < (showPic.y +30 )) {
					box.y = showPic.y +30;
				}
				//  当选区X坐标 大于图片X坐标时   右部
				if((box.x + box.boxWidth) > (showPic.x + showPic.width)) {
					box.x = showPic.x + showPic.width - box.boxWidth
				}
				//  当选区Y坐标大于图片Y坐标时  底部
				if((box.y + box.boxHeight) > (showPic.y + showPic.height +30)) {
					box.y = showPic.y + showPic.height - box.boxHeight + 30;
				}
				//  当选区的高度大于图片的高度时
				if(box.boxHeight > showPic.height) {
					box.boxHeight = showPic.height;
				}
				//  当选区的宽度大于图片的宽度时
				if(box.boxWidth > showPic.width) {
					box.boxWidth = showPic.width;
				}
				//  未选中区域变色
				uncheckArea();
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:BasicLayout />
	</s:layout>
	<s:Group id="group_all" depth="2" y="30" x="0">
		<s:Rect id="bg_1" x="0" y="0" width="100" height="80">
			<s:fill>
				<s:SolidColor color="#333" alpha="0.6" />
			</s:fill>
		</s:Rect>
		<s:Rect id="bg_2" x="0" y="0" width="100" height="80">
			<s:fill>
				<s:SolidColor color="#333" alpha="0.6" />
			</s:fill>
		</s:Rect>
		<s:Rect id="bg_3" x="0" y="0" width="100" height="80">
			<s:fill>
				<s:SolidColor color="#333" alpha="0.6" />
			</s:fill>
		</s:Rect>
		<s:Rect id="bg_4" x="0" y="0" width="100" height="80">
			<s:fill>
				<s:SolidColor color="#333" alpha="0.6" />
			</s:fill>
		</s:Rect>
	</s:Group>
	<astion1:ScaleBox id="box"  x="130" y="180" width="40" height="40" depth="3" move="box_moveHandler()" resize="box_moveHandler()" />
	<mx:VBox  verticalGap="0" borderVisible="false">
		<mx:HBox>
			<s:Button label="选择图片" click="select()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
			<s:Button label="图片裁剪" click="cut()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
			<s:Button label="预览" click="preview()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
			<s:Button label="另存本地" click="save()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
		</mx:HBox>
		<mx:HBox width="540" height="400"  id="container_clip">
			<s:Image id="showPic" y="30" x="0" width="400" height="400" click="showPic_clickHandler(event)" />
			<s:Image id="showSmallPic" x="440" width="120" height="120" />
		</mx:HBox>
		<mx:HBox>
		</mx:HBox>
	</mx:VBox>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.btnStyle {
			borderVisible : true;
			textAlign : center;
			verticalAlign : center;
			lineHeight : 30px;
			fontFamily : "宋体", "微软雅黑";
		}
		.t_6	{
			backgroundColor : #333;
			backgroundAlpha : 0.6;
		}
	</fx:Style>
</s:Application>

  源码下载地址: http://pan.baidu.com/s/1cT1fS

很抱歉的说,现在没有时间写博客,怕自己忘记写了,还得继续努力,过段时间再过来修改

posted @ 2014-04-13 10:42  信息技术的风采  阅读(579)  评论(0编辑  收藏  举报