我们到底能走多远系列（23）

扯淡:新的一年开始啦，各位有志青年也该发力学习，工作，赚钱啦！

　　来个笑话：劫匪进某银行抢劫：钱是国家的，命是自己的！通通不许动！” 于是没有一个人动。抢劫成功。

　　一个新来硕士劫匪问老大：我们赶快数一下抢了多少吧。老劫匪说，你傻啊？这么多数到什么时候啊？今天晚上看新闻不就知道了吗？（各位这就是工作经验啊）

　　第二天劫匪们看新闻：4名劫匪，劫去某银行，1个亿...

　　老大开骂了：不对啊，昨天数了3边就1千万呀，马德～，这么幸苦，人家动一下嘴皮子就赚了我们9倍。再也不干抢银行了～（这就是程序员啊）

　　

主题：

1,截图改进

年前写的，上传图片，截图：  供大家参考，上次的流程是这样的，上传图片到后台，保存到文件夹，然后页面上把原尺寸的图片展现出来，进行截图，截图成功后把截图坐标尺寸返回后台，后台根据这些参数把后台的图片剪切，然后把截图的效果展现在页面。

那么这儿就有个问题啦：

就是把原图展现在页面上进行截图的时候，如果上传的图片很大，会导致页面展现很难看！

参考了博客园的头像截图，只有通过缩小原图的方式来实现，又考虑到我做的不是截什么头像这样的小图，我是要一张高分辨率的图片，如此就有了一下方案：

把原图上传后，进行等比例缩放，缩放到页面上展现框中能够展现的大小，把原图存服务器，缩放图展现在截图页面，把缩放的比例，传到页面。

然后进行截图，截图完毕后，回传坐标，在js里结合坐标和缩放比例算出实际图中截图的坐标，然后交给后台去裁剪后台的原图，这样剪切出来的图片分辨率不会失真了。

 

事实上，明白了整个流程，根据上次的文章，就能写出来了，所以这里就不贴很多代码了

首先截图插件使用imgAreaSelect

piso = $('#photo').imgAreaSelect({                   x1: 0, y1: 0, x2: 72, y2: 128,                  aspectRatio: '9:16' ,onSelectEnd: preview,                persistent : true,                instance: true,                enable:true,                handles: true            });

返回截图坐标的时候，用js还原成原图上的坐标：

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);

等比例缩放：

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 imageResizeModel = new ImageResizeModel();        imageResizeModel.setBuffedImage(srcImage);        imageResizeModel.setSx(imageResizeModel.getSx());        imageResizeModel.setSy(imageResizeModel.getSy());        if(width>0||height>0){            ImageResizeModel imageResizeModel1 = resize(srcImage,width,height,equalProportion);            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;     }        /**      * 将原图片的BufferedImage对象生成缩略图      * source：原图片的BufferedImage对象      * targetW:缩略图的宽      * targetH:缩略图的高      */    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();        //这里想实现在targetW，targetH范围内实现等比例的缩放            //如果不需要等比例的缩放则下面的if else语句注释调即可          if(equalProportion){              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 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轴缩放比例    private double sy;//y轴缩放比例    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;    }    }

看一下改进后的效果吧：

 

 

2，上传按钮改进：

页面上看到这样的框，大家是不是觉得体验不好啦？

那改成博客园这样的？刚发现的.... 说实在的，博客园的这个已经调到完美了：

事实上我们可以直接吵博客园的样式来做的现在做成这样啦：

     
      上传图片
      
     

懂样式的可以看看啦，

一下两个就是关键啦：

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 a{
   color: #fff !important; text-decoration: none!important;cursor: pointer;}

 

效果：

 

3，关于window.showModalDialog 打开小页面缓存问题。

先前的代码没考虑这个问题，导致后期测试的时候才发现居然打开小页面后，下次再打开，修改的东西没有呈现....

解决方案也简单的，就是每次请求的url不一样就可以啦！

代码如下：随机数你懂的... 好像没必要 ++....先不管了...

var random = Math.round(1000); ;//每次请求的url保证不一样,决showModalDialog多次弹出时，取缓存页面问题function show(rid){   random++;   window.showModalDialog("toEditRole.html?roleId="+rid+"&random="+random,"window123","dialogHeight:510px;dialogWidth:650px;resizable:no;help:yes;status:no;scroll:auto");}

 

4，取得本服务器的ip，端口

java中大家都熟悉用如下代码，在jsp中 还是在action层中取得ip地址和端口号:

String basePath = request.getScheme() + "://" + request.getServerName() + ":"        + request.getServerPort() + request.getContextPath() + "/";

那么在service层怎么办呢？ 把request传进去不久可以啦...

是的，但是因为service层的话牵涉到业务，可能调用的方法比较多，如果每个都来个request实在是有点...

刚好用到那个dwr框架，可以直接取到request的信息：

public static String getBasePath(){                WebContext ctx = WebContextFactory.get();        HttpServletRequest request = ctx.getHttpServletRequest();                    String basePath = request.getScheme() + "://" + request.getServerName() + ":"        + request.getServerPort() + request.getContextPath() + "/";        return basePath;    }

但是，如果是action进来的service层方法，是不能使用这个方式的哦！

 

抛问题啦：

你们在项目里是怎么解决这个 要取得BasePath的问题的呢？ 希望得到帮助！

 

 

让我们继续前行

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

努力不一定成功，但不努力肯定不会成功。

共勉。