js+java 截取照片中的头像

很多网站都希望用户上传的头像不变形,同时又不希望由公司编辑来进行头像的处理;
下面这个程序会让你眼前一亮;javascript+java实现用户上传头像并且可按照规定头像长宽比例截图;
文件1:index.htm  (上传文件页面)

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"  lang ="en" >
< head >
    
< meta  http-equiv ="Content-type"  content ="text/html; charset=utf-8"   />
    
< meta  http-equiv ="Content-Language"  content ="en-us"   />
< title > upload file </ title >
    
< script  src ="../lib/prototype.js"  type ="text/javascript" ></ script >     
     
< script  src ="../lib/scriptaculous.js?load=builder,dragdrop"  type ="text/javascript" ></ script >
    
< script  src ="../cropper.js"  type ="text/javascript" ></ script >
    
    
< script  type ="text/javascript"  charset ="utf-8" >
        
        
function onEndCrop( coords, dimensions ) {
            $( 'x1' ).value 
= coords.x1;
            $( 'y1' ).value 
= coords.y1;
            $( 'x2' ).value 
= coords.x2;
            $( 'y2' ).value 
= coords.y2;
            $( 'width' ).value 
= dimensions.width;
            $( 'height' ).value 
= dimensions.height;
        }

        
        
// example with a preview of crop results, must have minimumm dimensions
        function onClickButton(){
        
new Cropper.ImgWithPreview( 
                    'cutimg',
                    

                        minWidth: 
200
                        minHeight: 
120,
                        ratioDim: 
{ x: 200, y: 120 },
                        displayOnInit: 
true
                        onEndCrop: onEndCrop,
                        previewWrap: 'previewArea'
                    }
 
                )
        }

        
        
/*
        if( typeof(dump) != 'function' ) {
            Debug.init(true, '/');
            
            function dump( msg ) {
                // Debug.raise( msg );
            };
        } else dump( '---------------------------------------/n' );
        
*/

        
    
</ script >
    
< link  rel ="stylesheet"  type ="text/css"  href ="debug.css"  media ="all"   />
    
< style  type ="text/css" >
        label 
{ 
            clear
: left;
            margin-left
: 50px;
            float
: left;
            width
: 5em;
        
}

        
        #img 
{
            width
: 500px;
            float
: left;
            margin
: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
        
}

        
        #previewArea 
{
            margin
: 20px; 0 0 20px;
            float
: left;
        
}

        
        #results 
{
            clear
: both;
        
}

    
</ style >
</ head >
< body >

< form  action ="upload.jsp"  id ="form1"  name ="form1"  encType ="multipart/form-data"   method ="post"  target ="hidden_frame"   >
    
< input  type ="file"  id ="file"  name ="file"  style ="width:450" >
    
< INPUT  type ="submit"  value ="上传文件" >< font  color ="red" > 支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传 </ font >< br  />< span  id ="msg" ></ span >     < div  id ="img" ></ div >< div  id ="previewArea" ></ div >
    
    
< br >
               
    
< iframe  name ='hidden_frame'  id ="hidden_frame"  style ='display:none' ></ iframe >
</ form >
< form  action ="../CiServlet"  method ="post"  name ="form2" >
< div  id ="results" >

            
< input  type ="hidden"  name ="x1"  id ="x1"   />
            
< input  type ="hidden"  name ="y1"  id ="y1"   />
            
< input  type ="hidden"  name ="x2"  id ="x2"   />
            
< input  type ="hidden"  name ="y2"  id ="y2"   />
            
< input  type ="hidden"  name ="width"  id ="width"   />
            
< input  type ="hidden"  name ="height"  id ="height"   />
            
< input  type ="hidden"  name ="filename"  id ="filename"   />

    
</ div >< input  name ="11"  type ="button"  onclick ="onClickButton()"  value ="截图" />
    
< input  type ="submit"  name ="button"  id ="button"  value ="保存"   /></ form >

</ body >
</ html >

< script  type ="text/javascript" >
function callback(msg,i,path)
{
    document.getElementById(
"file").outerHTML = document.getElementById("file").outerHTML;
    document.getElementById(
"msg").innerHTML = "<font color=red>"+msg+"</font>";
    
if(i == "1"){
    insertimg(path);
    }

}

function insertimg(path)
{
    document.getElementById(
"img").innerHTML = "<img src=/"../upload/"+path+"/" alt=/"test image/" id=/"cutimg/" />";
    document.getElementById(
"filename").value = path;
}

</ script >

文件2:upload.jsp(处理文件上传)upload by jspsmartupload

<% @ page language="java" contentType="text/html; charset=gb2312"  %>
<% @ page import="com.jspsmart.upload.SmartUpload,java.io.File" %>

<%
    
//新建一个SmartUpload对象
    SmartUpload su 
= new SmartUpload();

    
//上传初始化
    su.initialize(pageContext);

    
// 设定上传限制
    
//1.限制每个上传文件的最大长度。
    su.setMaxFileSize(
10000000);

    
//2.限制总上传数据的长度。
    su.setTotalMaxFileSize(
20000000);

    
//3.设定允许上传的文件(通过扩展名限制),仅允许doc,txt文件。
    su.setAllowedFilesList(
"doc,txt,jpg,rar,mid,waw,mp3,gif");
    
    
boolean sign = true;
    
String newName = "";
    
String filepath = "";
    
String filename = "";
    
    
//4.设定禁止上传的文件(通过扩展名限制),禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。
    try {
        su.setDeniedFilesList(
"exe,bat,jsp,htm,html");
        
//上传文件
        su.upload();
        
//将上传文件保存到指定目录
        
//su.save("c://");
        com.jspsmart.upload.File myFile 
= su.getFiles().getFile(0);

        
if (myFile.isMissing())
            sign 
= false;
        
else {
            java.text.SimpleDateFormat formatter 
= new java.text.SimpleDateFormat(
                    
"yyyyMMddHHmmssms");
            java.util.Date currentTime 
= new java.util.Date();
            filepath 
= application.getRealPath("/")+"upload//"//获取当前工程路径
            
if(!new File(filepath).isDirectory()){
                 
//路径不存在
                 
new File(filepath).mkdir();
                 }
            filename 
=  formatter.format(currentTime) + "."+ myFile.getFileExt();
            newName 
= filepath + filename;
            
//
            
// 将文件另存
            myFile.saveAs(newName);

            sign 
= true;
        }
    } catch (Exception e) {
        e.printStackTrace();
        sign 
= false;
    }
    
if(sign==true)
    {
        out.println(
"<script>parent.callback('upload file success','1','"+filename+"')</script>");
    }
else
    {
        out.println(
"<script>parent.callback('upload file error','0','')</script>");
    }
%>

文件3:CiServlet.java(dopost(),servlet)

package  com.Cropper;

import  java.io.IOException;
import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class for Servlet: CiServlet
 * 
 
*/

public   class  CiServlet  extends  javax.servlet.http.HttpServlet  implements
        javax.servlet.Servlet 
{
    
/*
     * (non-Java-doc)
     * 
     * @see javax.servlet.http.HttpServlet#HttpServlet()
     
*/

    
public CiServlet() {
        
super();
    }


    
protected void doPost(HttpServletRequest request,
            HttpServletResponse response) 
throws ServletException, IOException {
        
// TODO Auto-generated method stub
        int x = Integer.parseInt(request.getParameter("x1"));
        
int y = Integer.parseInt(request.getParameter("y1"));
        
int w = Integer.parseInt(request.getParameter("width"));
        
int h = Integer.parseInt(request.getParameter("height"));
        String filename 
= this.getServletContext().getRealPath("/")
                
+ "upload//" + request.getParameter("filename");
        
try {
            ImageCut.abscut(filename, x, y, w, h);
        }
 catch (Exception e) {
            e.printStackTrace();
        }

        System.out.println(
"截图成功!");
    }

}

文件4:ImageCut.java(图像处理)
这里应用以前发表过的一篇关于java图像处理的文章中的一个方法cut(),并稍微改动

package  com.Cropper;

import  java.io. * ;
import  java.awt. * ;
import  java.awt.image. * ;
import  java.awt.Graphics;
import  javax.imageio.ImageIO;

public   class  ImageCut  {

    
/** */
    
/**
     * 图像切割(改)
     * 
     * 
@param srcImageFile
     *            源图像地址
     * 
@param x
     *            目标切片起点x坐标
     * 
@param y
     *            目标切片起点y坐标
     * 
@param destWidth
     *            目标切片宽度
     * 
@param destHeight
     *            目标切片高度
     
*/

    
public static void abscut(String srcImageFile, 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(); // 源图高度
            System.out.println("srcWidth= " + srcWidth + "/tsrcHeight= "
                    
+ srcHeight);
            
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, 
00null); // 绘制缩小后的图
                g.dispose();
                
// 输出为文件
                ImageIO.write(tag, "JPEG"new File(srcImageFile));
            }

        }
 catch (Exception e) {
            e.printStackTrace();
        }

    }


    
/** */
    
/**
     * 
@param args
     
*/

    
public static void main(String[] args) {
        
// abscut("upload//200805151335353535.jpg", 10, 10, 100, 140);
        abscut("e:/castle.jpg"1011500281);
    }

}

文件5:web.xml   声明servlet   这个不做介绍

最后一些啰嗦的话:javascript这里用到jsCropperUI-1.2.0.zip包;里面还又一些例子;这个东西就去网上找吧

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值