圖片裁剪入門Jcrop
阿新 • • 發佈：2019-02-01
網際網路時代，越來越豐富多彩。當然，這離不開網路上各種各樣的圖片。然而，這也提高了我們對圖片處理的要求。像百度、騰訊這樣的數量級的處理，如果對圖片的上傳沒有一些優化，那麼每年多花費五六十臺伺服器、額外話費幾百萬人民幣的支出，去處理圖片完全是可能發生的。所以圖片的處理，值得我們重視。
今天，我們先不講那麼大的處理，因為一般人也接觸不到那麼大的量級圖片處理。並且也是由於處理起來相對複雜，我們日後慢慢滲透介紹。
如今，QQ上都是晒結婚照的（年齡問題？老了？），微信上都是微商的廣告。那麼QQ和微信上面的圖片裁剪功能大家一定都用過吧。今天就跟大家介紹這個好玩的功能。
實現步驟：
1、使用JQuery的AjaxSubmit進行圖片上傳；
2、使用Jcrop進行圖片裁剪；
3、封裝Images物件，封裝裁剪後的圖片的大小。
實現如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/end/css/jquery.Jcrop.css"/> <script type="text/javascript" src="/end/js/jquery-1.7.1.js"></script> <script type="text/javascript" src="/end/js/jquery.form.js"></script> <script type="text/javascript" src="/end/js/jquery.Jcrop.js"></script> </head> <body> <div id="body"> <div class="container"> <div class="clearfixs mr_created"> <div> <div class="content"> <form id="addProductNewFrm" class="form-horizontal" method="post" action="" enctype="multipart/form-data"> <input type="hidden" id="pc0" name="url"/> </form> <div> 預覽： <img id="cutimg" src=""/> </div> <div> <span class="col-md-5"> <div class="form-group"> <label class="control-label">產品logo： </label> <div class="form-control"> <form id="form2" action="#" enctype="multipart/form-data"> <input type="hidden" id="x" name="images.x"/> <input type="hidden" id="y" name="images.y"/> <input type="hidden" id="w" name="images.w"/> <input type="hidden" id="h" name="images.h"/> <table title="" width="80" border="1" cellspacing="0.1" cellpadding="0.1"> <tr> <td colspan="2">新增產品圖片：</td> </tr> <tr> <td colspan="2"> <input id="fileupload" name="fileupload" type="file" onchange="readURL(this);"/> </td> </tr> <tr> <td width="159" rowspan="2" align="center"> <div id="showImage" style="width: 100px; height: 100px"> </div> </td> <td width="64" height="27px" align="right"> <input id="btnProductNew" type="button" style="width: 64" class="right-button02" onclick="uploadImage()" value="上傳" /> </td> </tr> <tr> <td> <div id="tipDiv"></div> </td> </tr> </table> </form> </div> </div> </span> </div> <div style="height: 200px"></div> </div> </div> </div> </div> </div> <script type="text/javascript"> var uploadImageFlag=false; function uploadImage() { if(uploadImageFlag == false){ uploadImageFlag =true; $(document).ready(function() { var options = { url : "/end/app/upload/uploadFile.shtml", type : "POST", dataType : "text", success : function(msg) { if (msg.indexOf("#") > 0) { var data = msg.split("#"); $("#tipDiv").html(data[0]); $("#fileupload").val(""); $("#pc2").val(data[1]); $("#showImage").html("<img style='width:100px;height:100px' src='/"+data[1]+"'/>"); } else { $("#tipDiv").html(msg); } uploadImageFlag = false; } }; $("#form2").ajaxSubmit(options); return false; }); }else { console.info("please do not resubmit"); } } </script> <script type="text/javascript"> 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', { aspectRatio: 1, onSelect: updateCoords, onChange: updateCoords, minSize:[20,20] }); }; 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> </body> </html>
Images物件：
package com.huchi.huchipay.entity; public class Images { private int x; private int y; private int w; private int h; public int getX() { return x; } public void setX(int x) { this.x = x; } public int getY() { return y; } public void setY(int y) { this.y = y; } public int getW() { return w; } public void setW(int w) { this.w = w; } public int getH() { return h; } public void setH(int h) { this.h = h; } }
切割方法：
/**
* @MethodName : imgCut
* @Description : 圖片切割
* @param fileupload 原圖片的file檔案
* @param images 圖片的x、y、w、h
* @param savePath 新圖片儲存的位置
*/
public static void imgCut(File fileupload,Images images,String savePath) {
try {
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(fileupload);
int srcWidth = bi.getWidth();
int srcHeight = bi.getHeight();
if (srcWidth >= images.getW() && srcHeight >= images.getH()) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(images.getX(), images.getY(), images.getW(), images.getH());
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(images.getW(), images.getH(),BufferedImage.TYPE_INT_BGR);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
//輸出檔案
ImageIO.write(tag, savePath.substring(savePath.lastIndexOf(".")+1), new File(savePath));
}
} catch (Exception e) {
e.printStackTrace();
}
}預覽效果：
注意點：
1、本文實現中預覽中顯示的為圖片的原大小。所以，img標籤不能限制顯示大小，不然會導致裁剪區域不準確。【解決辦法就是按照圖片預覽顯示比例，傳遞裁剪大小，想清楚了，實現很簡單】；
2、裁剪過程中，及時顯示圖片的大小【未實現，這個在Jcrop的API中沒有找到相關實現，需要自己寫CSS程式碼。。。不想費那個勁，專案中夠用就得了】。