Flex & Java Servlet 实现简单图片编辑

 

flex有一个功能可以将组建转换成Bitmap这样只要拿到编辑过的图片字节码一切就容易了。这个功能大概有四步。
1.加载要编辑的图片
加载图片可以使用 BitImage类
因为只是演示一下就直接将将BitImage写死了。 代码：

view plain copy to clipboard print ?

1. <s:group id="myPanel" x="0" y="38">  
2. <s:bitmapimage source="@Embed('mv.jpg')" width="400" height="272" x="0" y="-1">  
3. <s:textarea x="269" y="21" width="112" height="88" contentbackgroundalpha="0.0" borderalpha="0.39">  
4. </s:textarea></s:bitmapimage></s:group>  

2.鼠标的划线
鼠标划线主要就是监听鼠标的事件，思路就是 在鼠标按下时图片处于可以编辑状态，拖动鼠标时划线，松开鼠标时划线结束

view plain copy to clipboard print ?

1. private var mX:Number;  
2. private var mY:Number;  
3. private var IsDown:Boolean=false;  
4. private var path:String=new String();  
5.                      // 初始化函数  
6. private function init():void{  
7.     myPanel.addEventListener(MouseEvent.MOUSE_DOWN,downHandler);  
8.     myPanel.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);  
9.     myPanel.addEventListener(MouseEvent.MOUSE_UP,upHandler);  
10.     myPanel.graphics.lineStyle(2,0x0000ff,1);  
11.     myPanel.graphics.moveTo(10,10);  
12.     myPanel.graphics.curveTo(175,125,200,200);  
13. }  
14.   
15. private function downHandler(e:MouseEvent):void{  
16.     IsDown=true;  
17.     mX=myPanel.mouseX;  
18.     mY=myPanel.mouseY;  
19. }  
20. private function upHandler(e:MouseEvent):void{  
21.     IsDown=false;  
22.     trace(path);  
23. }  
24.   
25. private function moveHandler(e:MouseEvent):void{  
26.     if(IsDown){  
27.         var x:Number = myPanel.mouseX;  
28.         var y:Number = myPanel.mouseY;  
29.         myPanel.graphics.lineStyle(_lineSize,_lineColor,1);  
30.         myPanel.graphics.moveTo(mX,mY);  
31.         myPanel.graphics.lineTo(x,y);  
32.         mX=x;  
33.         mY=y;  
34.     }  
35. }  

3.得到编辑后字节码

view plain copy to clipboard print ?

1. var png:PNGEncoder=new PNGEncoder();  
2. var srcBit:BitmapData = new BitmapData(myPanel.width,myPanel.height);  
3. srcBit.draw(myPanel);  
4. var data:ByteArray=srcBit.getPixels(new Rectangle(0,0,myPanel.width,myPanel.height));  
5. var image:ByteArray=png.encodeByteArray(data,myPanel.width,myPanel.height);  

上面代码得到png格式的图片编码
4.上传字节码到服务器

view plain copy to clipboard print ?

1. var hander:URLRequestHeader=new URLRequestHeader("Content-type","application/octet-stream");  
2. var request:URLRequest =new URLRequest("http://iyang/FlexUpload/DoServletUpload");  
3. request.requestHeaders.push(hander);  
4. request.method="POST";  
5. request.data=image;  
6. var load:URLLoader=new URLLoader(request);  
7. load.addEventListener(Event.COMPLETE,function(evt){  
8.      Alert.show("保存成功");  
9. });  

servlet使用request.getInputStream();得到字节流。

上面的功能经实现了所需要的功能
flex4 通过 FileReference可以实现将图片保存到本地，直接用得到的image的ByteArray就可以了
var file:FileReference=new FileReference();
file.save(image,”edit.png”);
这样就会弹出保存图片的对话框