extjs的头像截图功能的实现

在做截图功能之前，在百度搜索，居然没发现extjs的头像截取例子，在完成这个以前，差点郁闷死。

做了半个月，自己研究，找人问，总算是搞出了属于我们自己的extjs的例子，分享给和我一样苦逼的程序员。

转做extjs头像截图功能，第一天，熟悉了下代码。整理了思路。发现extjs截图功能的实现，有些困难。因网上很难找到类似的代码，最后总结了下实现方案：

从插件着手，先从网上找了一大堆截图插件，发现使用最好，最合适ext的插件以jcrop插件最好。
官网地址：http://deepliquid.com/content/Jcrop_Download.html

插件了解完成，就进行插件的导入，引用。
第一步，先把jquery.Jcrop.css插件放入你想要引用的路径，这看你想放在那，记得要进行绝对路径的引用。

而jquery.min.js和jquery.jcrop.js，按照一般来说，可以直接放到你某一个文件夹里，然后引用，但是我经过多次测试，发现，他并没有引用到，后来，想了一个折中的办法，直接把这两个js的代码放入了js页面。这办法，对性能影响不大，就是代码多，比较繁重。

OK，万事具备，只欠代码：
接下来就要写代码，进行头像截图的实现，

items : [{
        xtype : 'filefield',
        name : 'file',
        fieldLabel : "附件上传",
        buttonText:"浏览",
        labelWidth : 80,
        columnWidth : 1,
        allowBlank : false,
        buttonConfig:{iconCls:'file'},
        listeners:{
            afterrender : function(){
                jQuery(function cutImage(){
                    $('#target').Jcrop({
                          boxWidth:   450,minWidth:300,
                          boxHeight:  600,minHeigth:400,
                          onChange:   showCoords,
                          onSelect:   showCoords,

 onRelease:  clearCoords
                        },function(){
                         var bounds = this.getBounds();  
                         boundx = bounds[0];  
                         boundy = bounds[1];
                         jcrop_api = this;
                        });
                
                    $('#coords').on('change','input',function(e){
                      var x1 = $('#x1').val(),
                          y1 = $('#y1').val(),
                          w = $('#w').val(),
                          h = $('#h').val();
                      jcrop_api.setSelect([x1,y1,w,h]);
                     });
                 });

function showCoords(resume){
                      $('#x1').val(resume.x);
                      x1 = resume.x;
                      $('#y1').val(resume.y);
                      y1 = resume.y;
                      $('#w').val(resume.w);
                      w = resume.w;
                      $('#h').val(resume.h);
                      h= resume.h;
                    };

                    function clearCoords()
                    {
                      $('#coords input').val('');
                    };
                },
            change:function(btn,value){
             //是否是规定的图片类型
            var img_reg =
/\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
        if (img_reg.test(value)) {
            var img = Ext.getCmp('target') .destroy();
            var file = btn.fileInputEl.dom.files[0];
            var url = URL.createObjectURL(file);
            jcrop_api.setImage(url);
        } else {
             Ext.Msg.alert('提示', '请选择图片类型的文件！');

      return ;
               }
        }
     }
    },{
         xtype: 'fieldset',
         title:'图片预览',
         defaults: {margin:'0 0 0 0', width: 450,height:600},
         items: [
         {
          xtype: 'image',
          id:'target'
         }
         ]
   }]
});

var jcrop_api;
var x1;
var y1;
var w;
var h;


buttonAlign : 'center',
    buttons : [{
        text : '上传',
        cls : 'first_btn',
        handler : function(){
            var form = resume.readResume.openPhotoWin.getModifyForm().getForm();
            var me = this;
            if(form.isValid()){
                me.disable();
                form.submit({
                    url : '../resume/upload.action',
                    method : 'POST',
                    params : {
                        
                        'x1' : x1,
                        'y1' : y1,
                        'w' : w,

'h' : h
                    },
                      success : function(r,action){
                        me.enable();
                        resume.readResume.openPhotoWin.hide();
                        var r = action.result;
                        if(Ext.isEmpty(r)||Ext.isEmpty(r.message)){
                            resume.readResume.photoInfo.items.items[1].items.items[0].getEl().dom.src =
                                +'&x1='+x1
                                +'&y1='+y1
                                +'&w='+w
                                +'&h='+h
                                +'&random='+Math.random();
                            Ext.Msg.alert('提示',"头像更新成功");
                        }else{
                            Ext.Msg.alert('提示',r.message);
                        }
                    },

    failure : function(r,action){
                        me.enable();
                        Ext.Msg.alert('提示',action.result.message);
                    }
                });
            }
        }



Action层
    //截图参数的传值
    private String x1;

    private String y1;
    
    private String w;
    
    private String h;

@SecurityNonCheckRequired
    public String uploadPhoto() {

// 文件
        resume.setPhoto(file);
        
        try {
            cut(file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        // 处理照片
        resumeService.dealPhoto(resume);

        return returnSuccess();
    }
    

  public void cut(File file) throws IOException {  
            FileInputStream is = null;  
            ImageInputStream iis = null;  
            try {  
                // 读取图片文件  
                is = new FileInputStream(file);  
                /*
                 * 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader 声称能够解码指定格式。
                 * 参数：formatName - 包含非正式格式名称 . （例如 "jpeg" 或 "tiff"）等 。
                 */  
                Iterator it = ImageIO.getImageReadersByFormatName("jpg");  
                ImageReader reader = it.next();  
                // 获取图片流  
                iis = ImageIO.createImageInputStream(is);  

    reader.setInput(iis, true);  
                /*
                 *

描述如何对流进行解码的类

.用于指定如何在输入时从 Java Image I/O
                 * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件 将从其 ImageReader 实现的
                 * getDefaultReadParam 方法中返回 ImageReadParam 的实例。
                 */  
                ImageReadParam param = reader.getDefaultReadParam();  
                /*
                 * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
                 * 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。
                 */
                
       int x = Integer.parseInt(x1.split("\\.")[0]);
                int y = Integer.parseInt(y1.split("\\.")[0]);
                int width = Integer.parseInt(w.split("\\.")[0]);
                int height = Integer.parseInt(h.split("\\.")[0]);
                Rectangle rect = new Rectangle(x, y, width, height);                // 提供一个 BufferedImage，将其用作解码像素数据的目标。  
                param.setSourceRegion(rect);  
                /*
                 * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将 它作为一个完整的
                 * BufferedImage 返回。
                 */  
                BufferedImage bi = reader.read(0, param);  
                // 保存新图片  

     ImageIO.write(bi, "jpg", file.getAbsoluteFile());  
                resume.setPhoto(file);
            } finally {
                if (is != null)
                    is.close();
                if (iis != null)
                    iis.close();
            }  
      
        }