手机自由裁剪任意形状(js图片裁剪原理)
项目需求有个功能要实现头像，让我这个后端开发来做这个确实有点为难，结合网上大神的例子，做了个简单的功能，以备不时之需
实现效果
页面+js
后端控制器
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;@Controllerpublic 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);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
