简单图片裁剪上传，jsp+servlet+jQuery+Image Cropper（测试）

简单就好-怒

已于 2024-03-18 20:51:31 修改

阅读量2k

点赞数

分类专栏： web功能文章标签： jquery servlet java

于 2016-02-18 09:47:33 首次发布

本文链接：https://blog.csdn.net/qq_30085577/article/details/50683977

版权

web功能专栏收录该内容

7 篇文章 0 订阅

订阅专栏

服务器

package test;

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.IOException;

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

import sun.misc.BASE64Decoder;
public class uploadFile extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		String path=getServletContext().getRealPath("/");
		String filePath="upload/";
		
		String msg="default";
		
		/**       base64 图片         **/
		String base64Img=request.getParameter("image");
		BASE64Decoder  decoder=new BASE64Decoder();
		if(base64Img!=null&&!"".equals(base64Img)){
			try {
				byte[] b=decoder.decodeBuffer(base64Img);
				String name=System.currentTimeMillis()+".jpg";
				filePath+=name;
				File file=new File(path+filePath);
				ByteArrayInputStream is=new ByteArrayInputStream(b);
				BufferedImage bi=ImageIO.read(is);
				ImageIO.write(bi, "jpg", file);
				is.close();
				msg="上传成功";
				System.out.println("上传成功！");
			} catch (Exception e) {
				e.printStackTrace();
				msg="上传失败";
				System.err.print("上传失败");
			}
		}else{
			msg="上传失败";
			System.err.print("上传失败");
		}
		response.getWriter().println("{\"msg\":\""+msg+"\",\"imagePath\":\""+filePath+"\"}");
	}
}

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Cropper</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/cropper.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cropper.css">
<style type="text/css">
body,div,input,ul,li,table,tr,td,textarea,a{margin:0;padding:0;}
input,a{
  box-shadow:0px 0px 10px #000;
  margin:0 auto;
  border-radius:10px;
  color:#fff;
  padding:5px;
  -webkit-appearance:none;
}
</style>

<script type="text/javascript">
	$(function() {
		  var $image = $('#image');
	      var cropBoxData;
	      var canvasData;

	      $('#modal').on('shown.bs.modal', function () {
	        $image.cropper({
	        viewMode : 1,
			dragMode : 'move',
			autoCropArea : 1,
			aspectRatio:1,
			restore : false,
			guides : true,
			highlight : false,
			cropBoxMovable : false,
			cropBoxResizable : false,
	          built: function () {
	            $image.cropper('setCanvasData', canvasData);
	            $image.cropper('setCropBoxData', cropBoxData);
	          }
	        });
	      }).on('hidden.bs.modal', function () {
	        cropBoxData = $image.cropper('getCropBoxData');
	        canvasData = $image.cropper('getCanvasData');
	       // $image.cropper('destroy');
	      });
		
		$("#upload").click(function(){
           var canvas= $("#image").cropper("getCroppedCanvas");
		   var base64=canvas.toDataURL("image/jpeg",0.5);
            $.ajax({
                   url:"uploadFile",
                   type:"post",
                   data:{image:base64.substr(23)},
                   dataType:"json",
                   success:function(data){
                                  alert(data.msg);
                                  $("#showImage").prop("src",data.imagePath);
                           },
                   error:function(){alert("ajax error");}
                });
		});

		$("#selImg").change(function(){
           var file=this.files[0];
           var reader = new FileReader();
   		   reader.onload = function(e) {
   			                       var dataURL = e.target.result; 
   			                       $("#image").cropper('replace', dataURL);
   	                       };
   		   reader.readAsDataURL(file);
		});
	});
</script>
</head>
<body>

    <div class="container">

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-target="#modal" style="margin-top:50px;" data-toggle="modal">裁剪图片</button>

    <!-- show Image -->
    <h3>上传的图片</h3>
    <img src="" id="showImage"  alt="showImage" />
      
    <!-- Modal -->
    <div class="modal fade" id="modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content" >
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="modalLabel">裁剪图片</h4>
          </div>
          <div class="modal-body" style="height:350px;">
            <div style="width:230px;margin:0px auto;">
             <a class="btn btn-primary" href="javascript:void(0)" style="position: relative;height:35px;width:100px;display: block;margin-bottom:10px;float:left;">选择图片
               <input type="file" name="selImg" id="selImg" style="opacity:0;position: absolute;top:0px;left:0px;width:100px;"/>
             </a>
             <input type="button" value="上传图片" id="upload" style="float:left;margin-left:20px;height: 35px;width:100px;" class="btn btn-primary"/>
             <div style="clear:both;"></div>
            </div>
              <img id="image" src="images/dc_bg.jpg" alt="Picture" style="border:1px solid red;">
          </div>
          <div class="modal-footer" style="margin-top:30px">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<servlet>
		<servlet-name>uploadFile</servlet-name>
		<servlet-class>test.uploadFile</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>uploadFile</servlet-name>
		<url-pattern>/uploadFile</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>