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
スタイルが調整されていない場合、醜い関数がいくつかあります。