File Upload + screenshot + preview upgraded version-How far can we go series (23)

How far can we go series (23)

Nonsense:Starting in the new year, you may be interested in learning, working, and making money!

Joke: the robbers enter a bank to Rob: Money is from the country, and their lives are yours! Do not change !" So no one moved. Robbery successful.

A new master's robber asked the boss: Let's count how much we have snatched. The old robbers said, are you stupid? When will this majority be reached? I don't know if I can watch the news this evening? (This is your work experience)

The next day, the robbers watched the news: four robbers, who snatched to a bank, 0.1 billion...

The boss scolded me: no, it took tens of millions to count three sides yesterday, Madde ~, Fortunately, we earned nine times as much as we could. I will never rob the bank again ~ (This isProgramClerk)

Subject:

1. Improvement

I wrote it a year ago and uploaded an image. I caught it for your reference. The last process was like this. I uploaded the image to the background, saved it to a folder, and displayed the original size image on the page, then, return the coordinates to the background. The background splits the background image based on these parameters and displays the effect on the page.

So here is a problem:

When the source image is displayed on the page, if the uploaded image is large, it will make the page display very ugly!

After referring to the blog director's profile picture, I only achieved it by narrowing down the source image. Considering that I didn't cut down a small image like this, I wanted a high-resolution image, so we have the following solution:

After uploading the source image, perform proportional scaling to scale it to the size displayed in the display box on the page, save the source image to the server, scale the image to the page, and upload the scaled proportion to the page.

After that, return the coordinates and use the coordinates and zoom ratio in JS to calculate the coordinates in the actual graph. Then, hand the coordinates to the backend to crop the source image in the background, in this way, the resolution of the cut image will not be distorted.

 

In fact, according to the previousArticleSo there will be no more posts here.CodeNow

First, use the plug-inImgareaselect

Piso = $ ('# photo'). Imgareaselect ({x1:0, Y1: 0, X2: 72, Y2: 128, Aspectratio:'9: 16', Onselectend: preview, persistent:True, Instance:True, Enable:True, Handles:True});
 

When the coordinates are returned, use js to restore them to the coordinates of the original graph:

List [0] = parseint ($ ("# X1 "). val ()/SX); list [1] = parseint ($ ("# X2 "). val ()/SX); list [2] = parseint ($ ("# Y1 "). val ()/SY); list [3] = parseint ($ ("# Y2 "). val ()/SY); list [4] = parseint ($ ("# W "). val ()/SX); list [5] = parseint ($ ("# H "). val ()/SY );
 

Proportional Scaling:

         Public   Static   Double [] Savethumbnailimage (inputstream is, string imgtype, file SaveFile, Int  Width,  Int Height, Boolean Equalproportion) Throws Ioexception {bufferedimage srcimage;  If (Imgtype = Null | "" . Equals (imgtype) {imgtype = "Jpeg" ;} Srcimage = ImageIO. Read (is); imageresizemodel = New  Imageresizemodel (); imageresizemodel. setbuffedimage (srcimage); imageresizemodel. setsx (imageresizemodel. getsx (); response. setsy (imageresizemodel. getsy ());  If (Width> 0 | height> 0) {Imageresizemodel imageresizemodel1 = Resize (srcimage, width, height, interval proportion); imageresizemodel. setbuffedimage (imageresizemodel1.getbuffedimage (); imageresizemodel. setsx (imageresizemodel1.getsx (); imageresizemodel. setsy (imageresizemodel1.getsy ();} ImageIO. write (imageresizemodel. getbuffedimage (), imgtype, SaveFile );  Double [] Ratio = New   Double  [] {Imageresizemodel. getsx (), imageresizemodel. getsy ()};  Return  Ratio ;} /**  * Generate a thumbnail for the bufferedimage object of the original image * Source: bufferedimage object of the original image * targetw: width of the thumbnail * targeth: height of the thumbnail  */      Public   Static Imageresizemodel resize (bufferedimage source, Int Targetw, Int Targeth, Boolean  Equalproportion ){  Int Type = Source. GetType (); bufferedimage target = Null ;  Double SX = ( Double ) Targetw/ Source. getwidth ();  Double Sy = ( Double ) Targeth/ Source. getheight ();  //  Here we want to achieve proportional scaling within the range of targetw and targeth.  //  If you do not need proportional scaling, the IF else statement below can be annotated.          If  (Role proportion ){ If (SX> Sy) {SX = Sy; targetw = ( Int ) (SX * Source. getwidth ());}  Else  {SY = SX; targeth = ( Int ) (SX * Source. getheight ());}}  If (Type =Bufferedimage. type_custom) {colormodel cm = Source. getcolormodel (); writableraster raster = Cm. createcompatiblewritableraster (targetw, targeth );  Boolean Alphapremultiplied = Cm. isalphapremultiplied (); Target = New Bufferedimage (CM, raster, alphapremultiplied, Null  );}  Else  {Target = New Bufferedimage (targetw, targeth, type); graphics2d g = Target. creategraphics (); G. setrenderinghint (renderinghints. key_rendering, renderinghints. value_render_quality); G. drawrenderedimage (source, affinetransform. getscaleinstance (sx, Sy); G. dispose ();} imageresizemodel = New  Imageresizemodel (); imageresizemodel. setbuffedimage (target); imageresizemodel. setsx (SX); imageresizemodel. setsy (SY );  Return  Imageresizemodel ;} 

 
Imageresizemodel:
 

 Package Com. syezon. webapp. util;  Import  Java. AWT. image. bufferedimage;  Public   Class  Imageresizemodel {  Private  Bufferedimage buffedimage;  Private   Double SX; //  X-axis scaling ratio      Private   Double Sy; // Y-axis scaling ratio      Public  Bufferedimage getbuffedimage (){  Return  Buffedimage ;}  Public   Void  Setbuffedimage (bufferedimage buffedimage ){  This . Buffedimage = Buffedimage ;}  Public   Double  Getsx (){  Return SX ;}  Public   Void Setsx ( Double  SX ){  This . SX = SX ;}  Public   Double  Getsy (){  Return  Sy ;}  Public   Void Setsy ( Double Sy ){  This . Sy = Sy ;}} 

Let's take a look at the improved results:

 

 

2. upload button improvement:

If you see such a box on the page, do you think the experience is poor?

So change it to blog garden? Just discovered... To be honest, this blog garden has been perfectly adjusted:

As a matter of fact, we can directly create a blog Park style like this:

     <  Div  Class  = "Filewrapper"   >  <  A  Class  = "Filebutton"  > Upload images </  A  >  <  Input  Name  = "Advimage"  ID  = "Advimage"  Class  = "Fileinput" Type  = "File"  Value  = "$ {Advimage }"  Onchange  = "Uploadimage ()"  />  </  Div  > 

For more information about the style, see,

Here are two key points:

 
Opacity:0;
 

 
Font-size:100px;
 

. Fileinput { Cursor : Pointer ; Height : 24px ; Opacity : 0 ; Position : Absolute ; Right : 0 ; Top : 0 ;Font-size : 100px ; Filter : Alpha (opacity = 0) ; Width : 200px ;} . Filebutton { Background : None repeat scroll 0 0 # fc5d73 ; Color : # Ffffff ; Cursor :Pointer ; Display : Block ; Float : Left ; Font-size : 12px ; Height : 20px ; Line-height : 20px ; Padding : 2px 4px ;Text-align : Center ; Width : 96px ;} A: focus, A: active, A: hover { Border : Medium none ; Outline : Medium none ;} . Filewrapper { Float : Left ; Height : 24px ; Overflow : Hidden ; Position : Relative ; Width : 110px ; Cursor : Pointer ;} . Filewrapper { Color : # Fff! Important ; Text-Decoration : None! Important ; Cursor : Pointer ;}

 

Effect:

 

3. About how to open the small page cache in window. showmodaldialog.

The previous Code did not take this issue into consideration. As a result, it was found during later testing that the small page was opened and the modified content was not displayed next time ....

The solution is also simple, that is, every request URL is different!

The Code is as follows: random number, you know... it seems unnecessary to ++...

VaRRandom = math. Round (1000 );;//The URLs of each request must be different. When showmodaldialog is repeatedly popped up, the cache page is obtained.FunctionShow (RID) {random++; Window. showmodaldialog ("Toeditrole.html? Roleid = "+ rid +" & random = "+ random," window123 "," dialogheight: 510px; dialogwidth: pixel PX; resizable: No; help: Yes; Status: No; scroll: Auto");}
 

 

4. Obtain the IP address and port of the server.

In Java, everyone is familiar with the following code. In JSP, get the IP address and port number in the Action layer:

 
String basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + request. getcontextpath () + "/";
 

What should we do at the service layer? You can upload the request soon...

Yes, but because the service layer involves services, many methods may be called. If each request comes, it is a bit...

The DWR framework is used, and the request information can be obtained directly:

 
Public StaticString getbasepath () {webcontext CTX=Webcontextfactory. Get (); httpservletrequest request=CTX. gethttpservletrequest (); string basepath= Request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + request. getcontextpath () + "/";ReturnBasepath ;}
 

However,This method cannot be used if it is the service layer method of action!

 

Question thrown:

How did you solve the basepath issue in your project? Hope for help!

 

 

Let's move on

----------------------------------------------------------------------

Hard work may fail, but not hard work will certainly fail.
Mutual encouragement.