JAVA使用Jcrop做图片裁剪上传

最新推荐文章于 2021-02-12 16:59:02 发布

为何远方

最新推荐文章于 2021-02-12 16:59:02 发布

阅读量1.4k

点赞数 6

分类专栏： java 文章标签： JAVA 图片裁剪 Jcrop

本文链接：https://blog.csdn.net/qq_35992956/article/details/60959352

版权

java 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

首先需要引用三个JS文件

<link rel="stylesheet" href="Jcrop/jquery.Jcrop.css">
<script src="Jcrop/jquery-2.2.3.js"></script>
<script src="Jcrop/jquery.Jcrop.js"></script>

然后页面上下面的JS代码是在选择图片的时候通过AJAX上传图片，这里需要注意的是Jquery必须使用2.0以上的版本，否则后台就收不到文件

<script type="text/javascript">
	//图片上传的onchange事件，用于上传并回显图片
	function uploadImg() {  
	     var formData = new FormData($( "#uploadForm" )[0]); 
	     $.ajax({  
	          url: '${pageContext.request.contextPath}/uploadImag.do' ,  
	          type: 'POST',  
	          data: formData,  
	          async: false,  
	          cache: false,  
	          contentType: false,  
	          processData: false,  
	          success: function (returndata) { 
	        	  var json=eval("("+returndata+")");
	        	  var cropboxdiv=$('#cropboxdiv');//图片回显区域
	        	  $('#cropboxdiv').empty();
	        	  $("<img id='cropbox' src='"+json.path+"/"+json.fileName+"'>").appendTo(cropboxdiv);
	        	  $('#imgPath').val(json.path+"/"+json.fileName);
	        	  $('#srcPath').val(json.path);
    			  $('#fileName').val(json.fileName);
	        	  $('#cropbox').Jcrop({//初始化Jcrop图片裁剪器
	      			maxSize : [ 150, 170 ],
	      			minSize: [135,135],
	      			onSelect : function(c){//图片选择事件
	      				$('#x').val(c.x);
	      				$('#y').val(c.y);
	      				$('#w').val(c.w);
	      				$('#h').val(c.h);
	      			}
	      		});
	          } 
	     });  
	}
	//图片裁剪区域选好之后，交给java后台进行裁剪
	function cutImg(){
			$.ajax({    
					type:"post",
			 		url:"${pageContext.request.contextPath}/cutImg.do",
			 		cache:false,
			 		data:{
			 			x:$('#x').val(),
			 			y:$('#y').val(),
			 			w:$('#w').val(),
			 			h:$('#h').val(),
			 			srcPath:$('#srcPath').val(),
			 			fileName:$('#fileName').val()
			 		},
					success:function(r){
						$('#imgPath').val($('#srcPath').val()+"/"+$('#fileName').val());
					}
			});
	}
</script>

<body>
	<div id="cropboxdiv">
	<img id="cropbox" src="">
	</div>
	<form id= "uploadForm">  
	<table>
	<tr>
	<a href="javascript:void(0);" class="file">选择文件
    <input type="file" name="file" οnchange="uploadImg()">
</a>
	</tr>
	</table>
</form>
<input type="hidden" id="x" />
<input type="hidden" id="y" />
<input type="hidden" id="w" /> 
<input type="hidden" id="h" /> 
<input type="hidden" id="imgPath" /> 
<input type="hidden" id="srcPath" /> 
<input type="hidden" id="fileName" /> 
</body>

下面是后台接收前台onchange事件上传的图片，最后将图片的相对路径和文件名封装到一个DTO里面方便传输数据

@RequestMapping("uploadImag")
	public void uploadImag(@RequestParam(value = "file", required = false) MultipartFile file,
			HttpServletResponse response, HttpServletRequest request) throws Exception{
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		String date = sdf.format(new Date());
		String path = request.getSession().getServletContext()
				.getRealPath("img" + File.separator + date);
		String[] postfixs = file.getOriginalFilename().split("\\.");
		String postfix = postfixs[postfixs.length - 1];
		String fileName = new Date().getTime() + "." + postfix;
		File targetFile = new File(path, fileName);
		if (!targetFile.exists()) {
			targetFile.mkdirs();
		}
		try {
			file.transferTo(targetFile);
		} catch (Exception e) {
			e.printStackTrace();
		}
		imgCutPathDto icp=new imgCutPathDto();
		icp.setFileName(fileName);
		icp.setPath(Zealot.SSOIMAGPATH + File.separator+date);
		WebUtil.print(response,Json.toJson(icp));
	}

这时候原始图片已经回显到了页面，在调用前台的裁剪方法是会访问后台的一个裁剪图片方法，如下

@RequestMapping("cutImg")
	public void cutImg(HttpServletResponse response, HttpServletRequest request,String x,String y,String w,String h,String srcPath,String fileName){
		int x1=Integer.parseInt(x);
		int y1=Integer.parseInt(y);
		int w1=Integer.parseInt(w);
		int h1=Integer.parseInt(h);
		String path = request.getSession().getServletContext()
				.getRealPath("/");
		CutImg.cutPic(path+srcPath+File.separator+fileName,path+srcPath, x1, y1, w1, h1,fileName);
		WebUtil.print(response,"yes");
	}

具体裁剪工具类，如下

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

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

import org.apache.commons.io.FilenameUtils;

public class CutImg {
	
	
	private static final String JPG_HEX = "ff";
	private static final String PNG_HEX = "89";
	private static final String JPG_EXT = "jpg";
	private static final String PNG_EXT = "png";
	public static String getFileExt(String filePath) {
	    FileInputStream fis = null;
	    String extension = FilenameUtils.getExtension(filePath);
	    try {
	        fis = new FileInputStream(new File(filePath));
	        byte[] bs = new byte[1];
	        fis.read(bs);
	        String type = Integer.toHexString(bs[0]&0xFF);
	        if(JPG_HEX.equals(type))
	            extension = JPG_EXT;
	        if(PNG_HEX.equals(type))
	            extension = PNG_EXT;
	    } catch (FileNotFoundException e) {
	        e.printStackTrace();
	    } catch (IOException e) {
	        e.printStackTrace();
	    } finally {
	        try {
	            if(fis != null)
	                fis.close();
	        } catch (IOException e) {
	            e.printStackTrace();
	        }
	    }
	    return extension;
	}
	
	 public static boolean cutPic(String srcFile, String outFile, int x, int y,  
	            int width, int height,String fileName) {  
	        FileInputStream is = null;  
	        ImageInputStream iis = null;  
	        try {  
	            // 如果源图片不存在  
	            if (!new File(srcFile).exists()) {  
	                return false;  
	            }  
	  
	            // 读取图片文件  
	            is = new FileInputStream(srcFile); 
	            
	            
	            
	  
	            // 获取文件格式  
	            
	            String ext =getFileExt(srcFile);
	            //String ext = fileName.substring(fileName.lastIndexOf(".") + 1);  
	  
	            // ImageReader声称能够解码指定格式  
	            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);  
	            ImageReader reader = it.next();  
	  
	            // 获取图片流  
	            iis = ImageIO.createImageInputStream(is);  
	  
	            // 输入源中的图像将只按顺序读取  
	            reader.setInput(iis, true);  
	  
	            // 描述如何对流进行解码  
	            ImageReadParam param = reader.getDefaultReadParam();  
	  
	            // 图片裁剪区域  
	            Rectangle rect = new Rectangle(x, y, width, height);  
	  
	            // 提供一个 BufferedImage，将其用作解码像素数据的目标  
	            param.setSourceRegion(rect);  
	  
	            // 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象  
	            BufferedImage bi = reader.read(0, param);  
	            
	            
	            
	    		File tempOutFile = new File(outFile, fileName);
	    		File tempOutFileDir = new File(outFile);
	    		if (!tempOutFileDir.exists()) {
	    			tempOutFileDir.mkdirs();
	    		}
	    		tempOutFile.createNewFile();
	            ImageIO.write(bi, ext, tempOutFile);  
	            return true;  
	        } catch (Exception e) {  
	            e.printStackTrace();  
	            return false;  
	        } finally {  
	            try {  
	                if (is != null) {  
	                    is.close();  
	                }  
	                if (iis != null) {  
	                    iis.close();  
	                }  
	            } catch (IOException e) {  
	                e.printStackTrace();  
	                return false;  
	            }  
	        }  
	    }  
}

如此图片裁剪便完成了，原始的图片我在这儿被裁剪后的图片覆盖了，根据之前的上传路径就可以回显裁剪后的图片了