HTML
<＃ - imgareaselectプラグインを使用してアバターテストページをアップロードします - >
最後に、このプラグインをアップロードして参照を学習しました
<link rel = "styleSheet" type = "text/css" href = "$ {frontres} /imgareasel/css/imgareasel-animated.css"/> <link rel = "styleSheet"タイプ= "text/css" href = "$ {frontres} type = "text/javascript" src = "$ {frontres} /imgareasel/jquery-1.4.2.min.js"> </script> <script type = "text/javascript" src = "src =" $ {frontres}/imgareaselect/jquery.imgareaselect.pack.js "> jgs"> jsclipt.js " src = "$ {frontres}/imgareaselect/ajaxfileupload.js"> </script> <script> function addfile（obj）{//document.getelementbyid('img').src = path; $ .ajaxfileupload（{url： '$ {huluurl}/トレーナー/upload/ajaxupload'、//ファイルアップロードSecureuri：false、//セキュリティプロトコルが必要かどうか、一般的にfals fileElementid： 'phase doms dom/ id' j j j j j j j j j j j j j j j j j jj通常、jsonに設定されています（データ）アラート（「サーバーとの通信が失敗しました）。 } function preview（img、selection）{if（！selection.width ||！selection.height）return; // preview var scalex = 100 /selection.width; var scaley = 100 / selection.height; // var imgx = document.getElementById（ "写真"）。style.width; var imgx = parseint（$（ "＃photo"）。css（ "width"）。split（ "px"）[0]）; var imgy = parseint（$（ "＃photo"）。css（ "height"）。split（ "px"）[0]）; console.debug（imgx+"===="+imgy）; $（ '＃preview img'）。css（{width：math.round（scalex * imgx）、height：math.round（scaley * imgy）、marginleft：-math.round（scalex * selection.x1）、margintop：-math.round（scaley * selection.y1）}）; $（ '＃x1'）。val（selection.x1）; $（ '＃y1'）。val（selection.y1）; $（ '＃x2'）。val（selection.x2）; $（ '＃y2'）。val（selection.y2）; $（ '＃w'）。val（selection.width）; $（ '＃h'）。val（selection.height）; // backend data $（ '＃x1s'）。val（selection.x1）; $（ '＃y1s'）。val（selection.y1）; $（ '＃x2s'）。val（selection.x2）; $（ '＃y2s'）。val（selection.y2）; $（ '＃imgx'）。val（parseint（imgx））; //元の幅幅$（ '＃imgy'）。val（parseint（imgy））; //元の高さ} $（function（selection）{var imgx = $（ "＃photo"）。css（ "width"）。split（ "px"）[0]; var imgy = $（ "＃photo"）。css（ "height"）。 if（imgx> imgy）{ares = imgx} var ias = $（ '＃photo'）エリアIAS.setoptions（show：true}）; / ares = 100 / ares; $（ '＃x1s'）。$（ '＃x2s'）。 </script> <div style = "margin-top：20px;"> <div> <div> <div> <div> <h4 style = "font-weight：600; float：float：left">写真をアップロード</h4> </div> <div> <div style = "margin-top：15px"> <div = <div " hidden; background-color：＃8dc21f; color：#ffffff; "> <span>+photoの追加</span> <入力id =" photofile "file" name "name =" photofile "onchange =" addfile（this）; " style = "height：34px; position：absolute：0px; top：0px; margin：0px; padding：0px; cursor：pointer; ofacity：0;"> </div> </div> <span style = "float：left; margin-left：15px; coler：＃88888" gif、サイズは5mを超えません</li> </ul> </span> </div> </div> <div> <div> <img src = "/ymages/$ {（trainer.photo）！" "}" id = "img"> </div> </div> </div> </div> <$ {hulurl -phot/sporet/div> method = "post" enctype = "multipart /form-data"> <input type = "text" "id =" x1s "name =" x1s "value =" - " /> <input type =" text "id =" y1s "name =" y1s "value =" - " - " /> <input type = "text" id = "x2s" x2s " /" id = "y2s" name = "y2s" value = " - " /> <input type = "text" id = "imgx" name = "imgx" value = " - " /> <入力タイプ= "テキスト" id = "imgy" name = "imgy" value " - " /> <div style = "マージントップ：15px;マージンローフtype = "button" id = "chongxinshangchuan"> re upload </button> </div> <div> <ボタンタイプ= "Id =" baocun "を送信</button> </div> </div> </form> </div> </div> </div> </div> </div> div> </div> </div> </div> div> div> div> div> div> div> div> div> div> div> div> id = "main"> <div> <div> <div style = "float：left;幅：50％; "> <p>画像をクリックしてドラッグしてエリアを選択します。テキストアライグ：センター;オーバーフロー：隠し; Z-Index：1001;幅：300px;高さ：300px;位置：相対;左：50％;トップ：50％;マージン左：-150px;マージントップ：-150px; "> <img id =" photo "src ="/images/$ {（trainer.photo）！ ""} "style =" max-height：300px; max-width：300px; "/> </div> </div> </div> </div> </div> <div style =" float：left;幅：50％; "> <p style =" font-size：font-weight：bold;パディング左：0.1em; ">選択プレビュー</p> <div> <div id =" preview "> <img src ="/images/$ {trainer.photo！} "/> </div> </div> <table> font-weight：bold;テキストアライグ：左;パディング左：0.1em; ">座標</th> <th colspan =" 2 "style =" font-size：110％; font-weight：bold;テキストアライグ：左;パディング左：0.1em; ">寸法</th> </tr> </thead> <tbody> <tr> <td> <b> x <sub> 1 </sub>：</b> </td> <td> <入力タイプ="テキスト "id =" x1 "value =" - " - "/> </> </td> <td> <> </b> </b> type = "text" value = " - " id = "w"/> </td> </tr> <tr> <td> <b> y <sub> 1 </sub>：</b> </td> <td> <入力タイプ= "テキスト" id = "y1" value = " - "/> </td> <td> <b> value = " - "/> </td> </tr> <tr> <td> <b> x <sub> 2 </sub>：</b> </td> <td> <入力タイプ= "テキスト" id = "x2" value = " - "/> </td> <td> </td> <td> <td> </tr> <td> <b> y <sub> 2 </sub>：</b> </td> <td> <input type = "text" y2 "value =" - "/> </td> <td> </td> <td> </td> </tbody> </table>Java
//画像を表示するには、サーバーサーバーで仮想パス（Tomcat）が必要です。XML<コンテキストdebug = "" docbase = "g：/image" path = "/yages" reloadable = "true"/> echo echo [java] echo [java]ビューコード断片に派生したコードのコードフラグメントを見る[Java] fargments/** * @return 2（ @return 2（ @return 2（ @return））を削除することができます** "Touploadphoto"、method = requestmethod.get）public modelandview touploadtest（）{modelandview mav = leftmenu（ "/trainer/upload/uploadphoto"）; //トレーナートレーナー= null; try {long userid = frontshiroutil.getuserid（）; if（null！= userId）{trainer = trainerrepo.findone（userId）; trainerdbsvc.updatelastlogintime（userid）; }} catch（例外e）{e.printstacktrace（）; } mav.addobject（ "トレーナー"、トレーナー）; mavを返します。 } // localの更新@RequestMapping（ "/ajaxupload"）public @responsebody ajaxresult ajaxupload（multiparthttpservletrequest request）{Trainer Trainer = new Trainer（）; //最初の画像を取得します（フロントデスクの名前に従ってアップロードされたファイルを取得）multipartfile file = request.getFile（ "Photofile"）; if（file.getSize（）！= 0）{//ファイル名を取得します：string filename = file.getoriginalFileName（）;文字列タイムタイプ= null; if（null！= filename &&！filename.equals（ ""））{string imgtype = filename.substring（filename.lastindexof（ "。"））; //パス文字列ctxpath = "e：/rudongimage/photo/"; //ファイルファイルdirpath = newファイル（ctxpath）; if（！dirpath.exists（））{dirpath.mkdirs（）; } //ファイル名として時間をかけて日付= new date（）; SimpledateFormat sdformat = new SimpledateFormat（ "yyyymmddhhmmss"）; // 24-Hour String lgtime = sdformat.Format（date）; TimeType = LGTIME + IMGTYPE;ファイルuploadFile = new File（ctxpath + timeType）; try {filecopyutils.copy（file.getBytes（）、uploadFile）; } catch（ioexception e）{e.printstacktrace（）; }} string headphotopath = "photo/" + timeType; trainer.setphoto（headphotopath）; } try {// userid long userid = frontshiroutil.getuserid（）に基づいてトレーナーをクエリします。 if（null！= userId）{trainer.setuserid（userId）; //トレーナーAvatar TrainerDBSVC.UPDATETRAINERPHOTO（トレーナー）を更新します。 }} catch（例外e）{e.printstacktrace（）; } ajaxresult.createsuccess（トレーナー）を返します。 // <span style = "font-family：arial、helvetica、sans-serif;"> ajaxresultは変更できます</span>}/** *領域インターセプト領域アップロード画像テスト * * @return */@requestmapping（value = "uploadphototest"、method = requestmethod.post）公開モデルbiew uploadphottt（pryprottt（pryprott） @RequestParam（ "x1s"）integer x1、@requestparam（ "y1s"）integer y1、 @requestparam（ "x2s"）integer x2、 @requestparam（ "y2s"） {modelandview mav = leftmenu（ "redirect：/trainer/upload/touploadphoto"）;トレーナートレーナー= null; try {// userid long userid = frontshiroutil.getuserid（）に基づいてトレーナーをクエリします。 if（null！= userId）{trainer = trainerrepo.findone（userId）; }} catch（例外e）{e.printstacktrace（）; } file uploadFile = new File（ "e：/rudongimage/" + trainer.getphoto（））; inputstream is = null; bufferedimage src = null; int w = -1; int h = -1; try {is = new FileInputStream（uploadFile）; src = javax.imageio.imageio.read（is）; w = src.getWidth（null）; //ソース画像幅h = src.getheight（null）を取得します。 //ソースグラフの高さを取得しますis.close（）; } catch（Exception e）{e.printstacktrace（）; } integer l = 0; //小さなエッジを基底（元の画像サイズ）として使用するif（w <h）{l = w; } else {l = h; } //小さなエッジを基本（サムネイルサイズ）整数l2 = 0として使用します。 if（imgwidth <imgheight）{l2 = imgwidth; } else {l2 = imgheight; } integer x =（x1 * l）/ l2; //開始点x integer y =（y1 * l）/ l2; //開始点y整数xs =（x2 * l）/ l2; //エンドポイントx斜め位置integer ys =（y2 * l）/ l2; // end y end point y angogonal agonal imageutil = ymageutil（新しいイメージャティル）; //インターセプトされたファイル名文字列photoname = ""; ImageUtil.Cutimage（uploadFile、 "e：/rudongimage/photo/"、x、y、xs -x、ys -y）; string headphotopath = "photo/" + photoname; trainer.setphoto（headphotopath）; //トレーナーのアバターTrainerDBSVC.upDatetreaNerphoto（トレーナー）を更新します。 mavを返します。 }ツール
java.awt.colorをインポートします。 java.awt.graphicsをインポートします。 java.awt.imageをインポートします。 java.awt.rectangleをインポートします。 java.awt.image.bufferedimageをインポートします。 java.io.fileをインポートします。 java.io.fileinputStreamをインポートします。 java.io.filenotfoundexceptionをインポートします。 java.io.ioexceptionをインポートします。 java.io.inputStreamをインポートします。 java.io.outputStreamをインポートします。 java.util.arraysをインポートします。 java.util.iteratorをインポートします。 javax.imageio.imageioをインポートします。 javax.imageio.imagereadparamをインポートします。 javax.imageio.imagereaderをインポートします。 javax.imageio.stream.imageinputStreamをインポートします。 org.slf4j.loggerをインポートします。 org.slf4j.loggeractoryをインポートします。 / ***画像インターセプターツールクラス*/ public class imageutil {private logger log = loggerFactory.getLogger（getClass（））; private static string default_thumb_prevfix = "thumb_"; private static string default_cut_prevfix = "cut_"; private static boolean default_force = false; /*** <p>タイトル：cutimage </p>* <p>説明：元の画像と作物サイズに基づいてローカル写真を傍受</p>* @param srcimgソース画像* @param出力画像出力ストリーム* @param rectは、部品の座標とサイズを傍受する必要があります*/public quid utimage if（srcimg.exists（））{java.io.fileinputStream fis = null; ImageInputStream iis = null; try {fis = new fileinputStream（srcimg）; // ImageIOサポート画像タイプ：[BMP、BMP、JPG、JPG、WBMP、JPEG、PNG、PNG、JPEG、WBMP、GIF、GIF] String Type = arrays.ToString（Image.getReaderformatNames（）。 string suffix = null; //画像接尾辞if（srcimg.getName（）。indexof（ " } //タイプと画像の接尾辞はすべて小文字です。その後、接尾辞が合法かどうかを判断します。戻る ; } // fileInputStreamをImageInputStreamに変換しますiis = imageio.createimageinputStream（fis）; //画像タイプに従ってこのタイプのImagEReaderを取得emagreader reader = imageio.getimagereadersbysuffix（suffix）.next（）; reader.setInput（iis、true）; ImagEReadParam pAram = reader.getDefaulTreadParam（）; param.setsourceregion（rect）; bufferedimage bi = reader.read（0、param）; Imageio.write（bi、suffix、output）; } catch（filenotfoundexception e）{e.printstacktrace（）; } catch（ioexception e）{e.printstacktrace（）; }最後に{try {if（fis！= null）fis.close（）; if（iis！= null）iis.close（）; if（output！= null）output.close（）; } catch（ioexception e）{e.printstacktrace（）; }}}} else {log.info（ "srcイメージは存在しません。"）; }} public void cutimage（file srcimg、outputstream output、int x、int y、int width、int height）{cutimage（srcimg、output、new java.awt.rectangle（x、y、width、height））; } public void cutimage（file srcimg、string destimgpath、java.awt.rectangle rect）{file destimg = new file（destimgpath）; if（destimg.exists（））{string p = destimg.getPath（）; try {if（！destimg.isdirectory（））p = destimg.getParent（）; if（！p.endswith（file.separator））p = p + file.separator; cutimage（srcimg、new java.io.fileoutputstream（p + default_cut_prevfix + "_" + new java.util.date（）。gettime（） + "_" + srcimg.getname（）、rect）; } catch（filenotfoundexception e）{log.info（ "Destイメージは存在しません。"）; }} else log.info（ "Dest Imageフォルダーは存在しません。"）; } public void cutimage（file srcimg、string destimg、int x、int y、int width、int height）{cutimage（srcimg、destimg、new java.awt.rectangle（x、y、width、height））; } public void cutimage（string srcimg、string destimg、int x、int y、int width、int height）{cutimage（new file（srcimg）、destimg、new java.awt.rectangle（x、y、width、height））; }/*** <p>タイトル：ThumbnailImage </p>* <p>説明：画像パスに基づいてサムネイルを生成</p>* @param imagepathオリジナル画像パス* @param w thumbnail width* @param h thumbnail height* @param prevfixは、サムネイルのプレフィックスを生成します。ベストスケールサムネイルが生成されます） */ public void thumbnailimage（file srcimg、outputstream output、int w、h、string prevfix、boolean force）{if（srcimg.exists（））{try {// imageioサポートされた画像タイプ： jpeg、wbmp、gif、gif] string types = arrays.tosttring（imageio.getReaderformatNames（））。 string suffix = null; //画像接尾辞if（srcimg.getName（）。indexof（ " } //タイプと画像の接尾辞はすべて小文字です。その後、接尾辞が合法かどうかを判断します。戻る ; } log.info（ "ターゲットイメージのサイズ、幅：{}、height：{}。"、w、h）; Image IMG = ImageIo.Read（srcimg）; //元の画像と必要なサムネイルスケールに基づいて最も適切なサムネイルスケールを見つけます（！force）{int width = img.getWidth（null）; int height = img.getheight（null）; if（（width*1.0）/w <（height*1.0）/h）{if（width> w）{h = integer.parseint（new java.text.decimalformat（ "0"）。 log.info（ "画像の高さ、幅を変更する：{}、height：{}。"、w、h）; }} else {if（height> h）{w = integer.parseint（new java.text.decimalformat（ "0"）。format（width * h/（heigh * 1.0））; log.info（ "画像の幅、幅：{}、height：{}; h、bufferedimage.getgraphics（）; system.out.println（ "systed.out.println（"+e）; ！srcimg.isdirectory（））p = srcimg.getparent（！p.endswith（file.separator））p + file.separator （filenotfoundexception e）{log.info（ "Destイメージは存在しません。"+e）; }} public void thumbnailimage（string imagepath、int w、int h、string prevfix、boolean force）{file srcimg = new file（imagePath）; Thumbnailimage（srcimg、w、h、prevfix、force）; } public void thumbnailimage（string imagepath、int w、int h、boolean force）{thumbnailimage（imagepath、w、h、default_thumb_prevfix、default_force）; } public void thumbnailimage（string imagepath、int w、int h）{thumbnailimage（imagepath、w、h、default_force）; } public void readusimagereader（string src、string dest、int w、int h）throws exception {// image reader iterator readers = imageio.getimagereadersbyformatname（ "png"）; imageReader reader =（imagreader）readers.next（）; // Image Readerを入力してくださいInputStream source = new FileInputStream（SRC）; ImageInputStream iis = imageio.createimageinputStream（source）; reader.setInput（iis、true）; //画像パラメーターimagereadparam param = reader.getDefaultreadparam（）; // 100、200は左上の開始位置であり、300は300の幅で、100から100〜400の水平である300です。同様に、200〜350の面積は垂直に150 // rectangle rect = new Rectangle（100、200、300、150）; // int hh = 0; if（h> 100）hh =（h -100） / 3; rectangle rect = new Rectangle（0、HH、227、100）; param.setsourceregion（rect）; bufferedimage bi = reader.read（0、param）; Imageio.write（bi、 "jpg"、new file（dest））; } public static void main（string [] args）throws exception {// new Imageutil（）。thumbnailimage（ "imgs/tulips.jpg"、150、100）; // new ImageUtil（）。 // new ImageUtil（）。readusingimagereader（ "e：//rudongimage/photo/20160302090226.png"、 "e：//rudongimage/photo/2.png"、227、163）; }}XML構成
<bean id = "multipartresolver" class = "org.springframework.web.multipart.commons.commonsmultipartresolver"> <！ - 利用可能なプロパティの1つ。バイトの最大ファイルサイズ<プロパティ名= "maxuploadsize" value = "9999999999"/> - > </bean>
プラグイン接続
http://download.csdn.net/download/u014596302/9572377
スタイルが調整されていない場合、醜い関数がいくつかあります。