随笔-19  评论-128  文章-1  trackbacks-0
图片剪切功能:

效果图:






flex代码:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" xmlns:local="astion.*">
 
<mx:Script>
  
<![CDATA[
   import mx.controls.Image;
   import mx.graphics.ImageSnapshot;
   import flash.net.FileReference;
   import mx.graphics.codec.JPEGEncoder;
   import mx.managers.PopUpManager;
   import mx.containers.TitleWindow;
   import mx.controls.Alert;
   import mx.events.CloseEvent;
   import mx.core.IFlexDisplayObject;
   import mx.utils.*;
   import mx.core.Application;
   import astion.Dot;
   import astion.ScaleBox;
   
   public static const LINE_WIDTH:Number = 1;//缩放边框宽度
   private var file:FileReference;
   public var IMAGE_URL:String="http://localhost:8080/cutPicuter/aa/aa.jpg";
   private var loader:Loader;
   private var bmp:Bitmap;
            private var stream:URLStream;
            public var realPath:String="D:\myWorkSpace\cutPicuter\WebRoot\aa\aa.jpg";
   
   //初始化数据
   private function init():void{
    this.loader = new Loader();
                this.stream = new URLStream();
                this.loader.contentLoaderInfo.addEventListener(Event.COMPLETE,this.onComplete);
                this.loader.load(new URLRequest(encodeURI(this.IMAGE_URL)));//解决中文乱码
                this.stream.load(new URLRequest(encodeURI(this.IMAGE_URL)));
                this.stream.addEventListener(Event.COMPLETE,this.onLoaded);
   }
   private function onLoaded(e:Event):void
            {                                
                var bytearray:ByteArray = new ByteArray();    
                this.stream.readBytes(bytearray);
                
                if(this.stream.connected)
                    this.stream.close();
                    
                this.loader.loadBytes(bytearray);
            }
            private function onComplete(e:Event):void
            {
                try
                {
                    this.bmp = this.loader.content as Bitmap;
                    var showImage:Image= new Image();
                    showImage.source=this.loader.content;
                    canvas.addChild(showImage);
                    canvas.setChildIndex(box,1);
                    canvas.setChildIndex(showImage,0);
                }
                catch(e:Error)
                {
                    
                }
            }
   
   //截图,显示缩放选择框
   private function doCapture():void{
    box.x = 100;
    box.y = 100;
    box.visible = true;
   }
   
   //获取缩放选择框内的图像
   private function getImg():BitmapData{
    //截取整个区域
    box.scaleEnable = false;
    var bmp:BitmapData = ImageSnapshot.captureBitmapData(canvas);
    box.scaleEnable = true;
    
    //矩形为要截取区域                
                var re:Rectangle = new Rectangle(box.x+LINE_WIDTH,box.y+LINE_WIDTH,box.boxWidth-LINE_WIDTH,box.boxHeight-LINE_WIDTH); 
                var bytearray:ByteArray = new ByteArray();   
                //截取出所选区域的像素集合                        
                bytearray = bmp.getPixels(re); 
                
                
                var imgBD:BitmapData = new BitmapData(box.boxWidth-LINE_WIDTH,box.boxHeight-LINE_WIDTH);       
                //当前的bytearray.position为最大长度,要设为从0开始读取       
                bytearray.position=0;            
                var fillre:Rectangle = new Rectangle(0,0,box.boxWidth-LINE_WIDTH,box.boxHeight-LINE_WIDTH);
                //将截取出的像素集合存在新的bitmapdata里,大小和截取区域一样
                imgBD.setPixels(fillre,bytearray);
                
                return imgBD;
   }
   
   //预览图片
   private function doScan():void{
    var t:TitleWindow = new TitleWindow();
    t.showCloseButton=true;
    t.addEventListener(CloseEvent.CLOSE,closeWindow);
    t.width = box.boxWidth+t.getStyle("borderThickness");
    t.height =box.boxHeight+t.getStyle("borderThickness")+t.getStyle("headerHeight");
    var img:Image = new Image();
    img.width = box.boxWidth;
    img.height = box.boxHeight; 
    img.source = new Bitmap(getImg());
    t.addChild(img);
    PopUpManager.addPopUp(t,this,true);
    PopUpManager.centerPopUp(t);
   }
   
   private function closeWindow(e:CloseEvent):void{            
                var t:TitleWindow = e.currentTarget as TitleWindow;                    
                PopUpManager.removePopUp(t);                
            }
            
            //保存图片到本地
   private function downloadPicture():void{
    file=new FileReference();
    file.addEventListener(Event.COMPLETE,downloadComplete);
    file.save(new JPEGEncoder(80).encode(getImg()),"default.jpg");
   }
   
   private function downloadComplete(event:Event):void{
    Alert.show("成功保存图片到本地!","提示");
   }
   
   //保存图片到服务器即覆盖原来的图片
   private function save():void{
    Alert.show("是否保存剪切图片?","提示",3, this, function(event:CloseEvent):void {
          if (event.detail==Alert.YES){
           var request:URLRequest = new URLRequest("http://localhost:8080/cutPicuter/servlet/FileManagerSaveFileServlet?realPath="+encodeURIComponent(StringUtil.trim(realPath)));
     request.method=URLRequestMethod.POST;
     request.contentType = "application/octet-stream";
     request.data = new JPEGEncoder(80).encode(getImg());
     var loader:URLLoader = new URLLoader();
     loader.load(request);
     loader.addEventListener(Event.COMPLETE,saveResult);

          }});
   }
   
   private function saveResult(event:Event):void{
    Application.application.reLoadFolderFiles(realPath.substr(0,realPath.lastIndexOf("\\")));
    Alert.show("保存剪切图片成功","提示");
   }
  
]]>
 
</mx:Script>
 
<mx:HBox x="0" y="0">
        
<mx:LinkButton label="剪裁" click="doCapture();" icon="@Embed('assets/cut.png')"/>
        
<mx:LinkButton label="预览" click="doScan();" icon="@Embed('assets/ok.png')"/>
        
<mx:VRule height="22"/>
        
<mx:LinkButton label="保存"  click="save()"  icon="@Embed('assets/save.png')"/>
        
<mx:LinkButton label="另存为" click="downloadPicture();" icon="@Embed('assets/saveAs.png')"/>
    
</mx:HBox>
 
<mx:Canvas id="canvas" y="23" x="1">
 
<local:ScaleBox id="box" visible="false" y="0" x="0" width="100" height="100"/>
 
</mx:Canvas>
</mx:Application>



java代码:

 

package com;


import java.io.DataOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class FileManagerSaveFileServlet
 
*/
public class FileManagerSaveFileServlet extends HttpServlet {
 
 
private int len=0;//处理流
 private int mm=0;//重命名
 private String fileName="";//文件原名
 private String extName="";//文件扩展名
 private String tempFileName="";//文件名加扩展名
 
 
public void doGet(HttpServletRequest request, HttpServletResponse response)    
 
throws ServletException, IOException {    
 processRequest(request, response);    
 }    
   
 
public void doPost(HttpServletRequest request, HttpServletResponse response)    
  
throws ServletException, IOException {    
 processRequest(request, response);    
 }    
 
 
public void processRequest(HttpServletRequest request, HttpServletResponse response)

    
throws ServletException, IOException {
  request.setCharacterEncoding(
"utf-8");
  String realPath
=request.getParameter("realPath");
  
//System.out.println("FMSFS-->realPath:"+realPath);
  response.setContentType("application/octet-stream");
  InputStream is 
= request.getInputStream();
  
try {
  
int size = 0;
  
byte[] tmp = new byte[100000];
  
  tempFileName
=realPath.substring(realPath.lastIndexOf("\\")+1);//切割获得文件名加扩展名
  fileName=tempFileName.substring(0,tempFileName.lastIndexOf("."));//切割获得文件名
  
//确保获得真实的文件名如:1(1)可以获得真实为1,
  if(fileName.indexOf("(")!=-1){
   fileName
=fileName.substring(0,fileName.indexOf("("));
  }
  
  extName
=tempFileName.substring(tempFileName.lastIndexOf("."));//切割获得扩展名
  
  
//调用递归方法
  fileName+=reNameFile(realPath.substring(0,realPath.lastIndexOf("\\")+1),fileName,extName);
  
// 创建一个文件夹用来保存发过来的图片;
  File f = new File(realPath.substring(0,realPath.lastIndexOf("\\")+1)+fileName+extName);
  DataOutputStream dos 
= new DataOutputStream(new FileOutputStream(f));
  
while ((len = is.read(tmp)) != -1) {
  dos.write(tmp, 
0, len);
  size 
+= len;
  }
  dos.flush();
  dos.close();
  } 
catch (IOException e) {
  e.printStackTrace();
  }
 }
 
 
//递归来重命名文件名
 String str="";
 
public String reNameFile(String realPath,String filename,String extName){
  File file 
=new File(realPath+"\\"+filename+extName);
  str
="";
        
if(file.exists()){
         mm
++;
         str
="_"+mm;
         reNameFile(realPath,fileName
+str,extName);
        }
else{
         
if(mm!=0){
      str
="_"+mm;
         }
        }
  
return str;
 }
}

 


 

源码: flex图片剪切示例


原创人员:Denny

posted on 2010-09-01 09:55 obpm 阅读(8593) 评论(6)  编辑  收藏 所属分类: 控件Flex

评论:
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码) 2010-09-09 21:15 | fk01
请问楼主,你这个拖动的时候选择框怎么控制在的范围啊  回复  更多评论
  
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码) 2010-09-10 16:02 | axsz4251
很棒的学习资料,感谢提供!  回复  更多评论
  
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码) 2011-10-25 16:33 | mymoon
前台的Application.application.reLoadFolderFiles方法已经被官方屏蔽了,不能用了,还有别的方法吗?  回复  更多评论
  
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码)[未登录] 2011-11-09 11:17 | tom
楼主,是不是还少个类啊 local:ScaleBox   回复  更多评论
  
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码) 2011-11-18 09:33 | 慕容若雪
是不是少点东西啊,楼主  回复  更多评论
  
# re: flex图片剪切示例--预览、保存到本地、保存到服务器(附源码) 2011-11-18 09:34 | 慕容若雪
加我QQ:119449201

还有些不明白的地方想向你请教  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: