上传头像功能

上传头像功能每个社交平台都会有，我们选一张图然后进行裁剪，旁边会有一个小框来显示我们选中的部分，我们在上传头像时会根据平台的规定将头像裁剪出自己最满意的一块区域最为我们自己的头像，最炫的算是flash的，本人flex经验太少没办法搞出来只能选择其他方法了，流程：

1.将图片上传到服务器，

2.获取裁剪图的坐标(姑且这样叫吧)

3.对上传的原图进行裁剪

4.保存成头像

这只是一种方法，仅供参考

具体代码：

html js代码:

var position=new Array();

function onEndCrop(opic){

$('x1').value=position[0]=opic.x1;

$('y1').value=position[1]=opic.y1;

$('x2').value=position[2]=opic.x2;

$('y2').value=position[3]=opic.y2;

}

//minWidth,minHeight小的预览框的大小    x,y:选择框在原图上的位置坐标

Event.observe(window,'load',function(){

new Cropper.ImgWithPreview('opic',{minWidth:100,minHeight:100,ratioDim:{x:10,y:10},displayOnInit:true,onEndCrop:onEndCrop,previewWrap:'preview'})

});

html代码:

<、form action=""  enctype="multipart/form-data" method="post">图片上传区域

<、input type="file" name="pic" id="pic" >

<、input type="submit" value="保存">

<、/form>

#if($isUpload == 1)图片裁剪区域 isUpload 在上传完成时修改成1，作用是让裁剪区域显示

<、form action="" method="post" >

<、input id="x1" name="x1" size="3" type="hidden"/>

<、input id="y1" name="y1" size="3" type="hidden"/>

<、input id="x2" name="x2" size="3" type="hidden"/>

<、input id="y2" name="y2" size="3" type="hidden"/>

<、input name="cropper" id="cropper" type="submit" class="button" value="上传头像"/>

</form>

<'div style="margin:5px auto; width:760px;"><h1>裁剪预览：</h1><div id="preview"></div></div>

<'div style="margin:5px auto; width:760px;"><img src="$filePath" id="opic"/></div>

#end

后台：

上传方法就不贴了，很简单的东西IO流

// 用户经过剪辑后的图片的大小  

Integer x1 = Integer.parseInt(request.getParameter("x1"));  

Integer y1 = Integer.parseInt(request.getParameter("y1"));  

Integer x2 = Integer.parseInt(request.getParameter("x2"));  

Integer y2 = Integer.parseInt(request.getParameter("y2"));  

int with = x2 - x1;

int height = y2 - y1;

//裁剪方法

ImageCut.abscut(原图地址, 新图地址, x1,y1,with, height);  

deleteFile(原图地址);//删除转码后原图

完成。裁剪方法可以修改成将新图的数据流返回便于其他操作，

public static void deleteFile(String path) {

try {

File file = new File(path);

if(file.exists()) {

file.delete();

}

} catch (Exception e) {

//删除图片失败，暂时不作处理

e.printStackTrace();

}

}

 

      public static boolean abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,  

                  int destHeight) {  

            try {  

                  Image img;  

                  ImageFilter cropFilter;  

                  // 读取源图像  

                  BufferedImage bi = ImageIO.read(new File(srcImageFile));  

                  int srcWidth = bi.getWidth(); // 源图宽度  

                  int srcHeight = bi.getHeight(); // 源图高度                 

                  if (srcWidth >= destWidth && srcHeight >= destHeight) {  

                        Image image = bi.getScaledInstance(srcWidth, srcHeight,  

                                    Image.SCALE_DEFAULT);  

                        // 改进的想法:是否可用多线程加快切割速度  

                        // 四个参数分别为图像起点坐标和宽高  

                        // 即: CropImageFilter(int x,int y,int width,int height)  

                        cropFilter = new CropImageFilter(x, y, destWidth, destHeight);  

                        img = Toolkit.getDefaultToolkit().createImage(  

                                    new FilteredImageSource(image.getSource(), cropFilter));  

                        BufferedImage tag = new BufferedImage(destWidth, destHeight,  

                                    BufferedImage.TYPE_INT_RGB);  

                        Graphics g = tag.getGraphics();  

                        g.drawImage(img, 0, 0, null); // 绘制缩小后的图  

                        g.dispose();  

                        // 输出为文件  

                        ImageIO.write(tag, "JPEG", new File(dirImageFile));  

                  }  

                  return true;

            } catch (Exception e) {  

                  e.printStackTrace();  

                  return false;

            }  

      }