文件上传+截图+预览升级版-我们到底能走多远系列（23）
我们到底能走多远系列（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，上传按钮改进：
页面上看到这样的框，大家是不是觉得体验不好啦？
那改成博客园这样的？刚发现的.... 说实在的，博客园的这个已经调到完美了：
事实上我们可以直接吵博客园的样式来做的现在做成这样啦：
<div class="fileWrapper" > <a class="fileButton">上传图片</a> <input name="advImage" id="advImage" class="fileInput" type="file" value="${advImage}" onchange="uploadImage()"/> </div>
懂样式的可以看看啦，
一下两个就是关键啦：
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的问题的呢？ 希望得到帮助！
让我们继续前行
----------------------------------------------------------------------
努力不一定成功，但不努力肯定不会成功。
共勉。
