java中图片上传+预览+剪切解决方案

表现流程如下：

步骤1：点击浏览按钮选中图片-------1------>onchange事件把图片上传到服务器-------2----->图片路径回传

步骤2：进入切割图片------3----->切割，取得坐标，长度--------4---->传给服务器---------->后台切割产生新图片-----5------>回传新图路径

步骤3：页面截图预览

步骤1：

file标签：

代码如下	复制代码
<input name="advImage" id="advImage" type="file" style="height:22px;" onchange="uploadImage()"/>

onchange事件调用的js方法：

ajaxFileUpload利用iframe模拟了ajax上传文件。url:"uploadPreviewImage.html" 就是后台地址，（本人使用的是spring mvc），success:function (data , status)，上传成功后调用的js中，$('#photo').imgAreaSelect方法是使用了imgAreaSelect插件来初始化截图界面。官网地址：http://odyniec.net/projects/imgareaselect/关于ajaxFileUpload的api可以查看官网，开始的时候我使用的是网上随便下的一个js，发现一直调不同，最后换了官网的，才ok。

代码如下

复制代码

function uploadImage(){
// 检查图片格式
var f=document.getElementById("advImage").value;

    if(!/.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f))
    {
        alert("图片类型必须是.jpeg,jpg,png中的一种")
        return false;
    }
    // 利用ajaxFileUpload js 插件上传图片
    $.ajaxFileUpload({url:"uploadPreviewImage.html",
        secureuri:false,
        fileElementId:"advImage",
        dataType:"json",

        success:function (data , status) {
             //上传成功后，直接跳出截图框，使用imgAreaSelect插件
            piso = $('#photo').imgAreaSelect({
                  x1: 0, y1: 0, x2:480 , y2: 520 ,onSelectEnd: preview,
            resizable: false,
            instance: true,
            persistent:true
            });
            // 这个方法是现实一个div，托住截图框
            showCutImage();
            // 一些变量在页面的隐藏input的设置
            document.getElementById("photo").src = data.tempPath;
            document.getElementById("currentPath").value = data.tempPath;

        },
        error:function (data, status, e) {
            //alert("图片上传失败,请重新选择图片");
        }
    });
    return false;
}
// 截图选中后调用方法，保存好起始坐标和宽高
function preview(img, selection)
    {

        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
    } uploadPreviewImage方法，把文件方法零时文件夹下：

    public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{
        User user = (User)request.getSession().getAttribute("user");
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        MultipartFile image = multipartRequest.getFile("advImage");

        response.setCharacterEncoding(BusinessConstants.ENCOD_UTF);
        response.setHeader("ContentType", "json");

        PrintWriter out = response.getWriter();

        // 组合零时图片名
        String imageName = image.getOriginalFilename();
        String file_ext = imageName.substring(imageName.lastIndexOf(BusinessConstants.DOT) + 1);
        SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT);
        String tempImageName = user.getId() +BusinessConstants.UNDERLINE + df.format(new Date()) + BusinessConstants.DOT + file_ext;

        // 存放浏览图片的零时文件路径
        File file = new File(request.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH +
                tempImageName));

        byte[] advImageBytes = null;
        InputStream advImageStream = null;

        try {
            file.createNewFile();
            advImageStream = image.getInputStream();
            advImageBytes = FileCopyUtils.copyToByteArray(advImageStream);
            FileCopyUtils.copy(advImageBytes, file);
            advImageStream.close();
        } catch (IOException e) {

            e.printStackTrace();
        }

        String tempPath = BusinessConstants.TEMP_RELATIVE_PICTURE_PATH +
         tempImageName;

        // 传给页面相对路径
        out.print("{");
        out.print("tempPath:'"+tempPath+"',");
        out.print("msg:''");
        out.print("}");
        out.flush();
        out.close();
        // ajax
        return null;
    }

上面的uploadPreviewImage调用完成后就会把下面的div显示出来（初始隐藏）：

这就是截图界面啦！

代码如下

复制代码

</div>
<input type="button" id="cutImage" name="cutImage" class="btton-queren" onclick="cutImage()" style="float: right;" value="保存"/>
</div>

步骤2：

我们可以看到截图完毕后点击保存，就会调用cutImage方法：

里面我们利用dwr调用ReleaseService的cutImage方法。

代码如下

复制代码

function cutImage(){

    var list = new Array();
    list[0] = $("#x1").val();
    list[1] = $("#x2").val();
    list[2] = $("#y1").val();
    list[3] = $("#y2").val();
    list[4] = $("#w").val();
    list[5] = $("#h").val();
    var currentPath = document.getElementById("currentPath").value;
    // 这里是利用的dwr框架直接调用后台方法，以及使用后台传回的值
       // 这个方法就是利用坐标宽高进行切图，事实上这时候的原图已经在服务器了，所以我们只需要知道他的相对路径，即currentPath
    ReleaseService.cutImage(list, currentPath, function(value){

        document.getElementById("currentPath").value = value;
    }
   );

    var bgObj=document.getElementById("bgDiv");
    var msgObj=document.getElementById("cutImageDiv");
    bgObj.style.display = msgObj.style.display = "none";
    piso.cancelSelection();
    haveImage = 1;
    $('#msHaveImage').show();
    //$(".imgareaselect-outer").hide();
    //$(".imgareaselect-selection").parent().hide();

}ReleaseService的cutImage方法：

   public String cutImage(int[] size, String path) {
        int x1 = size[0];
        int x2 = size[1];
        int y1 = size[2];
        int y2 = size[3];
        int w = size[4];
        int h = size[5];
        if(w <= 0)
            w = 480;
        if(h<=0)
            h = 520;
        if(x1<0)
            x1 = 0;
        if(y1<0)
            y1 = 0;

        //File file = new File(request.getSession().getServletContext().getRealPath(path));

        path = path.substring(2);

        WebContext ctx = WebContextFactory.get();
        User user = (User)ctx.getSession().getAttribute("user");
        SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT);
        String file_ext = path.substring(path.lastIndexOf(BusinessConstants.DOT) + 1);
        File file = new File(ctx.getSession().getServletContext().getRealPath(path));
        String imageName = user.getId() + BusinessConstants.UNDERLINE +
            df.format(new Date()) + BusinessConstants.DOT + file_ext;
        String newFile = ctx.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH + imageName);

//切图操作
ImageCut.abscut(ctx.getSession().getServletContext().getRealPath(path), newFile, x1, y1, w, h);
        return BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + imageName;
    }来看一下截图方法：主要是Graphics2D的drawImage方法。

public static void abscut(String srcImageFile,String desImageFile, int x, int y,int width, int height) {
         try {
             Image img;
             ImageFilter cropFilter;
             File srcFile = new File(srcImageFile);
             //String fileName = srcFile.getName();
             String ext = getExtension(srcImageFile);
             if(ext==null)ext="jpg";
             // 读取源图像
             BufferedImage bi = ImageIO.read(srcFile);
             int srcWidth = bi.getWidth(); // 源图宽度
             int srcHeight = bi.getHeight(); // 源图高度
             if (srcWidth >= width && srcHeight >= height) {
                 BufferedImage tag;
                 Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
                 // 四个参数分别为图像起点坐标和宽高
                 // 即: CropImageFilter(int x,int y,int width,int height)
                 cropFilter = new CropImageFilter(x, y, width, height);
                 img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
                 int type = BufferedImage.TYPE_INT_RGB;
                 if("gif".equalsIgnoreCase(ext)||"png".equalsIgnoreCase(ext)){
                     type = BufferedImage.TYPE_INT_ARGB;
                 }
                 tag = new BufferedImage(width, height,type);
                 Graphics2D g = (Graphics2D)tag.getGraphics();

                 g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);
                 g.drawImage(img, 0, 0, null); // 绘制剪切后的图
                 g.dispose();

                 ImageIO.write(tag,ext, new File(desImageFile));
                 srcFile.delete();//删除原图
             }
         } catch (Exception e) {
             e.printStackTrace();
         }
     }

     public static String getExtension(String srcImageFile) {
        String ext = null;
        if(srcImageFile!=null && srcImageFile.lastIndexOf(".")>-1){
            ext = srcImageFile.substring(srcImageFile.lastIndexOf(".")+1);
        }
        return ext;
    }

步骤3：

至此，截图文件就被保存到指定的文件夹下，相对路径也会被存到数据库中，在页面上的处理就是把需要展现的img转变成src接可以完成了。

补充：Jsp教程,Java技巧及代码