Jcrop Java實現截圖的功能
阿新 • • 發佈：2019-02-08
上傳頭像，並且可以截圖，需要jcrop 架包，可以到網址去瀏覽效果下載架包：http://deepliquid.com/projects/Jcrop/demos.php
<pre name="code" class="html">//匯入樣式和js <link rel="stylesheet" href="/jquery.Jcrop.min.css" type="text/css" /> <script type="text/javascript" src="/jquery-1.8.0.js"></script> <script type="text/javascript" src="/jquery.Jcrop.js"></script>
<script type="text/javascript"> var boundx;var boundy; //初始化 jcrop jQuery(function($) { var jcrop_api; $('#element_id').Jcrop({ aspectRatio : 1, onSelect: showCoords,//選中時間 onChange: showCoords,//改變事件 onRelease: clearCoords, minSize :[200,200] //最小截圖範圍 },function(){ var bounds = this.getBounds(); //獲取當前圖片的寬高 boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; }); //改變的事件 $("#coords").on('change','input',function(e){ var x1 = $("#x1").val(), x2 = $("#x2").val(); y1 = $("#y1").val(); y2 = $("#y2").val(); jcrop_api.setSelect([x1,y1,x2,y2]); }); }); //顯示移動的座標 function showCoords(c){ $("#x1").val(c.x); $("#y1").val(c.y); $("#x2").val(c.x2); $("#y2").val(c.y2); $("#w").val(c.w); $("#h").val(c.h); //預覽的判斷 寬 if (parseInt(c.w) > 0) { //截圖的大小與寬高的比率 var rx = 120 / c.w; var ry = 120 / c.h; / /預覽的樣式 $('#previewImg').css({ //計算預覽圖的寬高 用比率乘圖片大小 width : Math.round(rx * 733) + 'px', //733為原圖的寬，如果原圖寬為拿正確，截圖的預覽圖片比例會有問題 在這裡可以用全域性變數boundx動態獲取 height : Math.round(ry * 598) + 'px', //598為原圖的高 boundy 為動態獲取的高 marginLeft : '-' + Math.round(rx * c.x) + 'px', marginTop : '-' + Math.round(ry * c.y) + 'px' }); } }; function clearCoords(){ $("#coords input").val(''); }; //點選事件 function cut(){ //獲取座標 var x = $("input[name='x1']").val(); var y = $("input[name='y1']").val(); var w = $("input[name='w']").val(); var h = $("input[name='h']").val(); //json 傳值 $.getJSON("${ctx}/cut?x=" + x + "&y=" + y +"&w=" + w,{h:h},function(data){ }); } </script>
後臺的程式碼是參見 http://blog.csdn.net/chenssy/article/details/8814966<!-- 頁面部分 --> <body> <div id="cutImage" > <div class="bigImg" style="float: left;"> <img id="element_id" src="./assets/img/1.png"/> </div> <div id="preview_box" style="width: 100px; height: 100px; overflow: hidden; margin-left: 5px;"> <img id="previewImg" src="./assets/img/1.png" width="120px"/> </div> <!-- 表單存放座標 樣式需要可隱藏 --> <form id="coords" class="coords" action="${ctx}/cut" onsubmit="return false;"> <table> <tr> <td> X1 <input id="x1" type="text" name="x1" id="x1" size="4"></input> </td> </tr> <tr> <td> Y1 <input id="y1" type="text" name ="y1" id="y1" size="4"></input> </td> </tr> <tr> <td> X2 <input id="x2" type="text" name="x2" id="x2" size="4"></input> </td> </tr> <tr> <td> Y2 <input id="y2" type="text" name="y2" id="y2" size="4"></input> </td> </tr> <tr> <td> W <input id="w" type="text" name="w" id="w" size="4"></input> </td> </tr> <tr> <td> H <input id="h" type="text" name="h" id="h" size="4"></input> </td> </tr> <tr> <td> <input type="button" onclick="cut()" value="截圖"/> </td> </tr> </table> </form> </div> </body>
/**
* 圖片切割
* @param imagePath 原圖地址
* @param x 目標切片座標 X軸起點
* @param y 目標切片座標 Y軸起點
* @param w 目標切片 寬度
* @param h 目標切片 高度
*/
public void cutImage(String imagePath, int x ,int y ,int w,int h,int boundx, int boundy){
//此處多了兩個引數分別是頁面傳入的原圖的寬（boundx）和高（boundy）
try {
Image img;
ImageFilter cropFilter;
// 讀取源影象
BufferedImage bi = ImageIO.read(new File(imagePath));
int srcWidth = bi.getWidth(); // 源圖寬度
int srcHeight = bi.getHeight(); // 源圖高度
//若原圖大小大於切片大小，則進行切割
if (srcWidth >= w && srcHeight >= h) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
int x1 = x*srcWidth/boundx;
int y1 = y*srcHeight/boundy;
int w1 = w*srcWidth/boundx;
int h1 = h*srcHeight/boundx;
cropFilter = new CropImageFilter(x1, y1, w1, h1);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 繪製縮小後的圖
g.dispose();
// 輸出為檔案
ImageIO.write(tag, "JPEG", new File(imagePath));
}
} catch (IOException e) {
e.printStackTrace();
}
}
//後臺切圖
@RequestMapping("/cut")
public String c(String x, String y,String w,String h,HttpServletRequest req){
//名字
String name = "1.png";
//路徑
String imagePath=req.getSession().getServletContext().getRealPath("/assets/img") + "\\" + name;
//呼叫的方法
TextController imageCut = new TextController();
imageCut.cutImage(imagePath, Integer.parseInt(x), Integer.parseInt(y), Integer.parseInt(w), Integer.parseInt(h));
return "";
}