<?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
很抱歉的说,现在没有时间写博客,怕自己忘记写了,还得继续努力,过段时间再过来修改