js图片裁剪原理（手机自由裁剪任意形状）
项目需求有个功能要实现头像，让我这个后端开发来做这个确实有点为难，结合网上大神的例子，做了个简单的功能，以备不时之需
实现效果
页面+js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
%>
My JSP 'face.jsp' starting page
<%-- --%>
后端控制器
package com.lovo.controller;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.lovo.utils.CutImgeUtil;
import com.lovo.utils.FileUploadCheck;
@Controller
public class FaceController {
private static Logger logger = Logger.getLogger(FaceController.class);
@RequestMapping(value = "/faceUpload.do",method = RequestMethod.POST)
public void faceLoginController(HttpServletRequest request,HttpServletResponse response,Model model,
@RequestParam("imgFile") MultipartFile imgFile,String userName,String artName){
//剪裁图片坐标
String x = request.getParameter("x");
String y = request.getParameter("y");
String w = request.getParameter("w");
String h = request.getParameter("h");
//原始图片坐标
String boundx = request.getParameter("boundx");
String boundy = request.getParameter("boundy");
//切图参数
int imgeX = (int) Double.parseDouble(x);
int imgeY = (int) Double.parseDouble(y);
int imegW = (int) Double.parseDouble(w);
int imgeH = (int) Double.parseDouble(h);
int srcX = (int) Double.parseDouble(boundx);
int srcY = (int) Double.parseDouble(boundy);
//文件保存文件夹
String path = request.getSession().getServletContext().getRealPath("/")+"fileUpload"+File.separator;
//文件重命名
Date day = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String newName = sdf.format(day)+System.currentTimeMillis()+".jpg";
try
{
//处理头像附件
if(imgFile !=null)
{
//判断是否为图片文件
if(FileUploadCheck.allowUpload(imgFile.getContentType()))
{
boolean cut = CutImgeUtil.cutImge(imgFile.getInputStream(), imgeX, imgeY, imegW, imgeH, srcX, srcY, path+newName);
if(cut)
{
//当头像剪切成功进行用户信息数据库存储
System.out.println(userName+" "+artName+" "+newName);
}
}
}
} catch (Exception e)
{
e.printStackTrace();
logger.error("上传失败");
}
}
}
工具类
package com.lovo.utils;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.InputStream;
import javax.imageio.ImageIO;
import org.apache.log4j.Logger;
public class CutImgeUtil {
private static Logger logger = Logger.getLogger(CutImgeUtil.class);
/**
* 图片剪切工具类
* @param input 图片输入流
* @param x 截取时的x坐标
* @param y 截取时的y坐标
* @param desWidth 截取的宽度
* @param desHeight 截取的高度
* @param srcWidth 页面图片的宽度
* @param srcHeight 页面图片的高度
* @param newFilePath 保存路径+文件名
* @return
*/
public static boolean cutImge(InputStream input, int x, int y, int desWidth, int desHeight, int srcWidth,int srcHeight,String newFilePath){
boolean cutFlag = true;
try
{
//图片类
Image imge ;
ImageFilter cropFilter;
//读取图片
BufferedImage bi = ImageIO.read(input);
//当剪裁大小小于原始图片大小才执行
if(srcWidth >= desWidth && srcHeight >= desHeight)
{
//获取原始图
Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
//获取新图
cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
imge = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(desWidth, desHeight, BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(imge, 0, 0, null);
g.dispose();
File out = new File(newFilePath);
// 输出文件
ImageIO.write(tag, "JPEG", out);
}
} catch (Exception e)
{
cutFlag = false;
e.printStackTrace();
logger.error("剪切失败");
}
return cutFlag;
}
}
package com.lovo.utils;
import java.util.Arrays;
import java.util.List;
public class FileUploadCheck {
//支持的文件类型
public static final List ALLOW_TYPES = Arrays.asList("image/jpg","image/jpeg","image/png","image/gif");
//校验文件类型是否是被允许的
public static boolean allowUpload(String postfix){
return ALLOW_TYPES.contains(postfix);
}
}