この記事では、SpringMVCの特定のコードをJCROPと組み合わせて、参照用の画像のトリミングを実現します。特定のコンテンツは次のとおりです
1。JSPページ：
<form name = "form" action = "<％= request.getContextPath（）％>/uploaddemo/uploadedimage" method = "post" enctype = "multipart/form-data"> <div> div> <入力タイプ= "ファイル" name "name =" imgfile "id =" fcupload " id = "cutimg"/> <入力タイプ= "隠された" id = "x" name = "x"/> <input type = "hidden" id = "y" name = "y"/> <入力タイプ= "隠された" id = "w" name = "w"/> <入力タイプ= "非表示" id = "h" name = "/>> </div> div> div> div> <> <> <> <> < * onclick = ""> upload </button> </div> </form>
2。JCROPコンポーネント参照の状況：
<link rel = "styleSheet" href = "<c：url value ="/resources/uploadplugin/css/jquery.jcrop.css "/>" type = "text/css"> </link> <script = "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"/> "> </>>
3。JCROPの使用方法
<script type = "text/javascript"> //グローバルAPIを定義します。 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：updateCoods}）; }; 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> 4。背景コード：
@RequestMapping（value = "/uploadheadimage"）public string uploadedimage（httpservletrequest request、 @requestparam（value = "x"）string x、 @requestparam（value = "y"）string y、 @requestparam（value = "h"）string h、@requestparam MultiPartFile ImageFile）スロー{System.out.println（ "================================================================== 「リソース/uploadimages/」 filename.substring（eding）; dir.exists（）; integer.parseint（x）; int imageh = integer.parseint（h）; int imagew = integer.parseint（w）; //这里开始截取操作system.out.println（ "========= emageCutstart ============="）; ImageCut.ImgCut（SrcimagePath、Imagex、Imagey、ImageW、ImageH）; System.out.println（ "=============================="）; }} "user/uploadimg/test"を返します。 } 5。ImageCut.javaツールクラス：
/ ***インターセプト画像* @param srcimagefile元の画像アドレス* interpecting* @param y y y座標インターセプト中* @param deswidth Intercepted width* @param desheight Intercepted Height*/ public Static Void imgcut（int srcimagefile、int x、int deswidth、int x、int y、int des 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、desheight、desheight）; img = toolkit.getDefaultToolkit（）。createImage（new FilteredImagesource（mage.getSource（）、cropfilter））; bufferedimage tag = new bufferedimage（deswidth、desheight、bufferedimage.type_int_rgb）;グラフィックg = tag.getgraphics（）; g.drawimage（img、0、0、null）; g.dispose（）; // file file imageio.write（tag、 "jpeg"、new file（srcimagefile+"_ cut.jpg"））; }} catch（例外e）{e.printstacktrace（）; }} 6. JCROPを使用する2つの方法：
1。
jQuery（ '＃cropbox'）。jcrop（{onchange：showcoords、onselect：showcoords}）;2。
var api = $ .jcrop（ '＃cropbox'、{onchange：showpreview、onselect：showpreview、aspectratio：1}）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。