SpringMVC結(jié)合Jcrop實現(xiàn)圖片裁剪
更新時間:2016年12月30日 16:31:53 作者:繁華穿越現(xiàn)實
這篇文章主要介紹了SpringMVC結(jié)合Jcrop實現(xiàn)圖片裁剪的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了SpringMVC結(jié)合Jcrop實現(xiàn)圖片裁剪的具體代碼,供大家參考,具體內(nèi)容如下
一、jsp頁面:
<form name="form" action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal"
method="post" enctype="multipart/form-data">
<div class="modal-body text-center">
<div class="zxx_main_con">
<div class="zxx_test_list">
<input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>
<img alt="" src="" id="cutimg"/>
<input type="hidden" id="x" name="x"/>
<input type="hidden" id="y" name="y"/>
<input type="hidden" id="w" name="w"/>
<input type="hidden" id="h" name="h"/>
</div>
</div>
</div>
<div class="modal-footer">
<button id="submit" onclick="">上傳</button>
</div>
</form>
二、jcrop組件引用情況:
<link rel="stylesheet" href="<c:url value="/resources/uploadPlugin/css/jquery.Jcrop.css"/>" type="text/css"></link> <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery-1.8.3.js"/>"></script> <script type="text/javascript" src="<c:url value="/resources/uploadPlugin/scripts/jquery.Jcrop.js"/>"></script>
三、jcrop使用方法
<script type="text/javascript">
//定義一個全局api,這樣操作起來比較靈活
var api = null;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#cutimg').removeAttr('src');
$('#cutimg').attr('src', e.target.result);
api = $.Jcrop('#cutimg', {
setSelect: [ 20, 20, 200, 200 ],
aspectRatio: 1,
onSelect: updateCoords
});
};
if (api != undefined) {
api.destroy();
}
}
function updateCoords(obj) {
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
};
}
</script>
四、后臺代碼:
@RequestMapping(value = "/uploadHeadImage")
public String uploadHeadImage(
HttpServletRequest request,
@RequestParam(value = "x") String x,
@RequestParam(value = "y") String y,
@RequestParam(value = "h") String h,
@RequestParam(value = "w") String w,
@RequestParam(value = "imgFile") MultipartFile imageFile
) throws Exception{
System.out.println("==========Start=============");
String realPath = request.getSession().getServletContext().getRealPath("/");
String resourcePath = "resources/uploadImages/";
if(imageFile!=null){
if(FileUploadUtil.allowUpload(imageFile.getContentType())){
String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename());
int end = fileName.lastIndexOf(".");
String saveName = fileName.substring(0,end);
File dir = new File(realPath + resourcePath);
if(!dir.exists()){
dir.mkdirs();
}
File file = new File(dir,saveName+"_src.jpg");
imageFile.transferTo(file);
String srcImagePath = realPath + resourcePath + saveName;
int imageX = Integer.parseInt(x);
int imageY = Integer.parseInt(y);
int imageH = Integer.parseInt(h);
int imageW = Integer.parseInt(w);
//這里開始截取操作
System.out.println("==========imageCutStart=============");
ImageCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH);
System.out.println("==========imageCutEnd=============");
}
}
return "user/uploadImg/test";
}
五、ImageCut.java工具類:
/**
* 截取圖片
* @param srcImageFile 原圖片地址
* @param x 截取時的x坐標(biāo)
* @param y 截取時的y坐標(biāo)
* @param desWidth 截取的寬度
* @param desHeight 截取的高度
*/
public static void imgCut(String srcImageFile, int x, int y, int desWidth,
int desHeight) {
try {
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(new File(srcImageFile+"_src.jpg"));
int srcWidth = bi.getWidth();
int srcHeight = bi.getHeight();
if (srcWidth >= desWidth && srcHeight >= desHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(desWidth, desHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
//輸出文件
ImageIO.write(tag, "JPEG", new File(srcImageFile+"_cut.jpg"));
}
} catch (Exception e) {
e.printStackTrace();
}
}
六、jcrop的兩種使用方式:
1、
jQuery('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
2、
var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Java基礎(chǔ)篇_有關(guān)接口和抽象類的幾道練習(xí)題(分享)
下面小編就為大家?guī)硪黄狫ava基礎(chǔ)篇_有關(guān)接口和抽象類的幾道練習(xí)題(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
SpringBoot2底層注解@Configuration配置類詳解
這篇文章主要為大家介紹了SpringBoot2底層注解@Configuration配置類詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05
websocket在springboot+vue中的使用教程
這篇文章主要介紹了websocket在springboot+vue中的使用教程,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
SpringBoot之controller參數(shù)校驗詳解
介紹了Java中使用@Validated和@Valid進(jìn)行參數(shù)校驗的方法,包括不同標(biāo)簽的使用場景、基本屬性和一些常用的注解類型,同時,還討論了如何在控制器中使用這些校驗標(biāo)簽,以及如何處理校驗結(jié)果和自定義錯誤消息,最后,還介紹了如何實現(xiàn)分組校驗和嵌套校驗,并提供了一些示例代碼2024-11-11

