jquery 上传头像预览

最新推荐文章于 2022-05-04 20:17:49 发布

炫街舞

最新推荐文章于 2022-05-04 20:17:49 发布

阅读量8.1k

点赞数 1

分类专栏： Java JQuery

本文链接：https://blog.csdn.net/xuanjiewu/article/details/8212690

版权

Java 同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

JQuery

10 篇文章 0 订阅

订阅专栏

参考：http://odyniec.net/projects/imgareaselect/

前端：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

var realImgWidth = 0;
var realImgHeight = 0;
var scissorX = 50;
var scissorY = 50;

function scissor(){
        var imagePath = document.getElementById("imagePath").value;
        var tt = document.getElementById("imagePath");
        var aa = $("#imagePath");
    if(imagePath=="" || imagePath==null){
          alert("<bean:message key='label.uploadPhoto' />！");
          return false;
    }else{

        //先把图片上传到服务器
        $("#headForm").ajaxSubmit({
              type: "POST",
              url: "${basePath}myzonePar.do?method=uploadPic&param="+Math.random(),
              //data: "classId="+classId,
               dataType: "json",
               success: function(result){
               $("#imgtarget").attr("src","${basePath}upload/"+ result.picName);
                $("#ximg").attr("src", "${basePath}upload/"+ result.picName);
                $("#qietu").show();

                document.getElementById("uploadImg").value = result.picName;
                setTimeout(function(){
                           realImgWidth = $("#imgtarget").width();
                          realImgHeight = $("#imgtarget").height();
                         var ias = $('#imgtarget').imgAreaSelect({ instance: true });

                          if(parseInt(realImgWidth)<50){
                                  scissorX = parseInt(realImgWidth);
                        }
                       if(parseInt(realImgHeight)<50){
                                scissorY = parseInt(realImgHeight);
                        }
                           ias.setSelection(0, 0, scissorX, scissorY, true);
                           ias.setOptions({ show: true });
                           ias.update();
                            $('.imgareaselect-selection').show();
      },1000);

     }
       });
  }
   }

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = scissorX / selection.width;
var scaleY = scissorY / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX* parseInt(realImgWidth) ),
        height: Math.round(scaleY * parseInt(realImgHeight) ),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#scaleWidth').val(selection.width);
    $('#scaleHeight').val(selection.height);
}

$(function () {
$('#imgtarget').imgAreaSelect({ aspectRatio: '1:1', handles: true,show:true,
fadeSpeed: 200, maxHeight:50, maxWidth:50, minHeight:50, minWidth:50, onSelectChange: preview, onInit:preview });
});

</script>

</head>
<body>

<form id="headForm" name="headForm" method="post" enctype="multipart/form-data" action="${basePath}myzonePar.do?method=toUpdateHeadImage">
         <div class="shangchuan">
         <div class="shangchuan_left">
             <div >
                   <c:choose>
          <c:when test="${!empty headImage}">
              <img src="${basePath}showImage.do?uuid=${uuid}" width="50" height="50" /><br/>
          </c:when>
          <c:otherwise>
              <img src="${basePath}jsp/parents/image/qshead.jpg" width="50" height="50" /><br/>
          </c:otherwise>
         </c:choose>
             </div>
             </div>
             <div class="shangchuan_right">
                    <input id="imagePath" name="file" size="30" style=" margin-top:20px; height:25px;" type="file" onChange="scissor()"/>
                    <div style="width:150px; float:left; padding-top:5px;"></div>
                    <div style="float:left; margin-left:99px; width:190px;"><img src="${basePath}/jsp/parents/<bean:message key='label.image' />/tianjia01.png" id="updateHeadImg" name="updateHeadImg" onClick="updateImgFun()"style="margin-top:5px; float:right; cursor:pointer;"/></div>
              </div>
        </div>
        <div id="qietu" style="height: 150px; margin:2px 0 0 100px; display:none;">
             <div style="width:150px; height: 150px; float:left; ">
                  <div id="imgg" style=" border:1px solid green; float:left; overflow: hidden;">
                       <img id="imgtarget" src="" />
                  </div>
             </div>
             <div style="width:20px; height:150px; border:0px; float:left;"></div>
             <div class="frame" style="margin:10px 10px 0 30px; width: 50px; height: 150px; float:left;">
            <div id="preview" style="width: 50px; height: 50px; overflow: hidden;">
                 <img id="ximg" name="ximg" src="" >
            </div>
          </div>
          <input type="text" id="uploadImg" name="uploadImg" value="" style="display:none;"/>
          <table style="margin-top: 1em; height:150px; display:none;">
          <thead>
           <tr>
             <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
               Coordinates
             </th>
             <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
               Dimensions
             </th>
           </tr>
         </thead>
         <tbody>
           <tr>
                <td style="width:20px;"><b>X<sub>1</sub>:</b></td>
           <td><input id="x1" name="x1" value="0" type="text" size="5" readonly="true"></td>
           <td style="width:20px;"><b>Width:</b></td>
             <td><input value="-" id="scaleWidth" name="scaleWidth" type="text" size="5" readonly="true"></td>
           </tr>
           <tr>
             <td><b>Y<sub>1</sub>:</b></td>
             <td><input id="y1" name="y1" value="0" type="text" size="5" readonly="true"></td>
             <td><b>Height:</b></td>
             <td><input id="scaleHeight" name="scaleHeight" value="-" type="text" size="5" readonly="true"></td>
           </tr>
           <tr>
             <td><b>X<sub>2</sub>:</b></td>
             <td><input id="x2" name="x2" value="50" type="text" size="5" readonly="true"></td>
             <td></td>
             <td></td>
           </tr>
           <tr>
             <td><b>Y<sub>2</sub>:</b></td>
             <td><input id="y2" name="y2" value="50" type="text" size="5" readonly="true"></td>
             <td></td>
             <td></td>
           </tr>
         </tbody>
       </table>
    </div>
       </form>

</body>

</html>

后台：

public ActionForward uploadPic(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) throws FileNotFoundException, IOException{
        UploadFormBean uf =(UploadFormBean)form;
        FormFile file = uf.getFile();
        System.out.println(file.getFileSize());

        if(file.getFileSize() > 0){
          try {
         InputStream stream = file.getInputStream();
            String filePath = request.getRealPath("/")+"upload/";

            SimpleDateFormat df=new SimpleDateFormat("yyyyMMddHHmmss");
         String str=df.format(new Date());

            filePath = filePath + str + file.getFileName();
            OutputStream bos = new FileOutputStream(filePath);
            int bytesRead = 0;
            byte[] buffer = new byte[2*1024*1024];
            while ((bytesRead = stream.read(buffer, 0, 2*1024*1024)) != -1) {
             bos.write(buffer, 0, bytesRead);
             bos.flush();
            }
            bos.close();
            stream.close();
            BufferedImage sourceImage = ImageIO.read(new File(filePath));
            int height = sourceImage.getHeight();
            int width = sourceImage.getWidth();
            if(file.getFileSize() > 10*1024 || (width>50 && height>50)){ //大于10k进行压缩
                //按比例压缩
                ImageUtil.scaleImage(150, 150*height/width, filePath,filePath);
                sourceImage = ImageIO.read(new File(filePath));
                width = sourceImage.getWidth();
                height = sourceImage.getHeight();
                if(height>150){
               ImageUtil.scaleImage(150*150/height, 150, filePath,filePath);
                }
            }
            JSONObject obj = new JSONObject();
            String picName = str+file.getFileName();
            obj.put("picName", picName);
            PrintWriter out = response.getWriter();
            out.print(obj);
       out.close();

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

public ActionForward updateHeadImage(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) throws FileNotFoundException, IOException{

        UploadFormBean uf =(UploadFormBean)form;
        FormFile file = uf.getFile();
        Hashtable hashTable = uf.getMultipartRequestHandler().getTextElements();
        System.out.println(hashTable);
        String x11 = ((String[])hashTable.get("x1"))[0];
        String x12 = ((String[])hashTable.get("x2"))[0];
        String y11 = ((String[])hashTable.get("y1"))[0];
        String y12 = ((String[])hashTable.get("y2"))[0];
        String width = ((String[])hashTable.get("scaleWidth"))[0];
        String height = ((String[])hashTable.get("scaleHeight"))[0];
        String imageName = ((String[])hashTable.get("uploadImg"))[0];

        System.out.println("imageName:"+imageName);

        Integer x1 = Integer.parseInt(x11);
        Integer x2 = Integer.parseInt(x12);
        Integer y1 = Integer.parseInt(y11);
        Integer y2 = Integer.parseInt(y12);
        //Integer scaleWidth = Integer.parseInt(width);
        //Integer scaleHeight = Integer.parseInt(height);
        Integer scaleWidth = 50;
        Integer scaleHeight = 50;

        System.out.println("x1:"+x1+", x2:"+x2+", y1:"+y1+", y2:"+y2+", scaleWidth:"+scaleWidth+", scaleHeight:"+scaleHeight);

    try{
          SimpleDateFormat df=new SimpleDateFormat("yyyyMMddHHmmss");
   String str=df.format(new Date());
          String filePath = request.getRealPath("/")+"upload/";
          String savePath = filePath + str + file.getFileName();

          String originPath = request.getRealPath("/")+"upload/"+imageName;
          System.out.println("originPath:"+originPath);
          System.out.println("savePath:"+savePath);

        if(x1 != null && x2 != null && y1 != null && y2 != null) {
            //按尺寸裁剪图片
            ImageUtil.scissor(x1, x2, y1, y2, originPath, savePath);
        }

        File scissorFile = new File(savePath); //读取裁剪后的图片
        System.out.println("scissorFile.length():"+scissorFile.length());
        if (scissorFile.length()>10*1024) { //如果裁剪后的图片大于10k进行压缩
           //按比例压缩图片
           ImageUtil.scaleImage(scaleWidth, scaleHeight, savePath,savePath);
        }

        FileInputStream in = new FileInputStream(savePath); //读取裁剪后的图片
        //InputStream in = file.getInputStream();
          ByteArrayOutputStream outStream = new ByteArrayOutputStream();
          byte[] data = new byte[4096];
          int count = -1;
          while((count = in.read(data,0,4096)) != -1){
            outStream.write(data, 0, count);
          }
            data = null;
           outStream.toByteArray();

          BASE64Encoder encoder = new BASE64Encoder();
          String path = encoder.encode(outStream.toByteArray());

        String token = (String) request.getSession().getAttribute("token");
         IbssUser ibssUser = IbssUtils.getIbssUser(token);
               ibssUser.setHeadImage(path);

      String rtnCode = IbssUtils.updateHeadImage(token, ibssUser);
     return null;

}

ImageUtil 类：提供压缩和裁剪图片的方法：

import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;

import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;

import com.mortennobel.imagescaling.ResampleOp;

/**
* 图片处理工具类
*
*/
public class ImageUtil {

    /**
     * 根据传入的图片坐标进行图片截取
     *
     * @param x1 X起点坐标
     * @param x2 X终点坐标
     * @param y1 Y起点坐标
     * @param y2 Y终点坐标
     * @param originPath 原始图片的存放路径
     * @param savePath 截取后图片的存储路径
     * @throws IOException
     */
    public static void scissor(int x1, int x2, int y1, int y2,
            String originPath, String savePath) throws IOException {
        ImageInputStream iis = null;
        FileInputStream is = null;
        try {
            // 读取图片文件
            is = new FileInputStream(originPath);

            /*
             * 返回包含所有当前已注册 ImageReader 的 Iterator，
             * 这些 ImageReader 声称能够解码指定格式。
            * 参数：formatName - 包含非正式格式名称 .（例如 "jpeg" 或 "tiff"）等。
             */
            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(getExtention(originPath)
                            .toLowerCase());
            ImageReader reader = it.next();
            // 获取图片流
            iis = ImageIO.createImageInputStream(is);

            /*
             * iis:读取源.true:只向前搜索，将它标记为 ‘只向前搜索’。
             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许
             * reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
             */
            reader.setInput(iis, true);

            /*
             * 描述如何对流进行解码的类，用于指定如何在输入时从 Java Image I/O
             * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件
            * 将从其 ImageReader 实现的
             * getDefaultReadParam方法中返回 ImageReadParam 的实例。
            */
            ImageReadParam param = reader.getDefaultReadParam();

            /*
             * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
             * 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。
             */
            Rectangle rect = new Rectangle(x1, y1, x2 - x1, y2 - y1);

            // 提供一个 BufferedImage，将其用作解码像素数据的目标。
            param.setSourceRegion(rect);

            /*
             * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将它作为一个完整的
             * BufferedImage 返回。
             */
            BufferedImage bi = reader.read(0, param);

            // 保存新图片
            ImageIO.write(bi, getExtention(originPath).toLowerCase(), new File(
                    savePath));
        }catch(Exception e){
        e.printStackTrace();
        } finally {
            if (is != null)
                is.close();
            if (iis != null)
                iis.close();
        }
    }

    /**
     *
     * 缩放图片
     *
     * @param width 宽
     * @param height 高
     * @param originPath 原始路径
     * @param savePath 保存路径
     * @throws IOException
     */
    public static void scaleImage(int width, int height, String originPath,
            String savePath) throws IOException {

        BufferedImage sourceImage = readImage(originPath);
        ResampleOp resampleOp = new ResampleOp(width, height);
        BufferedImage rescaledTomato = resampleOp.filter(sourceImage, null);
        ImageIO.write(rescaledTomato, getExtention(originPath).toLowerCase(),
                new File(savePath));
    }

    private static BufferedImage readImage(String imagePath) throws IOException {
        return readImage(new File(imagePath));
    }

    private static BufferedImage readImage(File image) throws IOException {
        return ImageIO.read(image);
    }

    /**
     * 功能：提取文件名的后缀
     *
     * @param fileName
     * @return
     */
    private static String getExtention(String fileName) {
        int pos = fileName.lastIndexOf(".");
        return fileName.substring(pos + 1);
    }
}