文件上传+截图+预览升级版-我们到底能走多远系列(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的问题的呢? 希望得到帮助!

 

 

让我们继续前行

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

努力不一定成功,但不努力肯定不会成功。
共勉。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值