項目需求有個功能要實現頭像，讓我這個后端開發來做這個確實有點為難，結合網上大神的例子，做了個簡單的功能，以備不時之需

實現效果

image.png

頁面+js

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

static/css/bootstrap.css"/> --%>

/* jcrop對象，全局變量方便操作 */

var api = null;

/* 原圖寬度 */

var boundx;

/* 原圖高度 */

var boundy;

/* 選擇圖片事件 */

function readURL(URL){

var reader = new FileReader();

reader.readAsDataURL(URL.files[0]);

reader.onload = function(e){

$("#faceId").removeAttr("src");

$("#lookId").removeAttr("src");

$("#faceId").attr("src",e.target.result);

$("#lookId").attr("src",e.target.result);

$("#faceId").Jcrop({

onChange: showPreview,

onSelect: showPreview,

aspectRatio: 1,

boxWidth:600

},function(){

// Use the API to get the real image size

//使用API來獲得真實的圖像大小

var bounds = this.getBounds();

boundx = bounds[0];

boundy = bounds[1];

// Store the API in the jcrop_api variable

//jcrop_api變量中存儲API

api = this;

$("#boundx").val(boundx);

$("#boundy").val(boundy);

});

};

/* 移除jcrop */

if (api != undefined) {

api.destroy();

}

//簡單的事件處理程序，響應自onChange,onSelect事件，按照上面的Jcrop調用

function showPreview(coords){

/* 設置剪切參數 */

$("#x").val(coords.x);

$("#y").val(coords.y);

$("#w").val(coords.w);

$("#h").val(coords.h);

if(parseInt(coords.w) > 0){

//計算預覽區域圖片縮放的比例，通過計算顯示區域的寬度(與高度)與剪裁的寬度(與高度)之比得到

var rx = $("#preview_box").width() / coords.w;

var ry = $("#preview_box").height() / coords.h;

$("#lookId").css({

width:Math.round(rx * $("#faceId").width()) + "px", //預覽圖片寬度為計算比例值與原圖片寬度的乘積

height:Math.round(rx * $("#faceId").height()) + "px", //預覽圖片高度為計算比例值與原圖片高度的乘積

marginLeft:"-" + Math.round(rx * coords.x) + "px",

marginTop:"-" + Math.round(ry * coords.y) + "px"

});

}

}

}

頭像：
頭像預覽：
用戶名：	藝名：

上傳

后端控制器

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);

}

}

總結

以上是生活随笔為你收集整理的jcrop java_JAVA spring+jcrop.js实现简单的头像剪裁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。