Java+jquery实现裁剪图片上传到服务器

大体分两步：

1、利用jquery裁剪图片，把裁剪到的几个点传入后端

2、利用前端传入的几个点，来裁剪图片

首先，用到一个jquery的插件 imgAreaSelect 

实例及插件下载地址：http://odyniec.net/projects/imgareaselect/

引入插件：

    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

JS代码：

<script type="text/javascript">
        $(document).ready(function () {
            $('#ladybug_ant').imgAreaSelect({ aspectRatio: '2:1', handles: true,onSelectChange: preview });

            $("#sliceButton").click(function(){
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "http://192.168.2.208/work/j/caijian",
                    data: {
                        x:$("#x1").val(),
                        y:$("#y1").val(),
                        w:$("#w").val(),
                        h:$("#h").val()
                    },
                    success: function(data){
                        console.log(data);
                    }
                });
            });
        });

       //实时改变坐标点input的值
        function preview(img, selection) {
            console.log('run');
            if (!selection.width || !selection.height)
                return;
            var scaleX = 100 / selection.width;
            var scaleY = 100 / selection.height;
            $('#preview img').css({
                width: Math.round(scaleX * 300),
                height: Math.round(scaleY * 300),
                marginLeft: -Math.round(scaleX * selection.x1),
                marginTop: -Math.round(scaleY * selection.y1)
            });
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
            $('#w').val(selection.width);
            $('#h').val(selection.height);
        }
    </script>

html代码：

x1:<input type="text" id="x1"/><br/>
x2:<input type="text" id="x2"/><br/>
y1:<input type="text" id="y1"/><br/>
y2:<input type="text" id="y2"/><br/>
图片宽度：<input type="text" id="w"/><br/>
图片高度：<input type="text" id="h"/><br/>

<img id="ladybug_ant" src="img.jpg" alt="测试图片" title="测试图片">
<button id="sliceButton">裁剪</button>

后台裁剪图片java代码

package cn.sevennight;

import java.awt.Rectangle;
import java.awt.image.BufferedImage;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import java.util.Iterator;

import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;

public class OperateImage {
    
    
    // ===源图片路径名称如:c:\1.jpg  
    private String srcpath;

    // ===剪切图片存放路径名称.如:c:\2.jpg 
    private String subpath;

    // ===剪切点x坐标 
    private int x;
    private int y;

    // ===剪切点宽度 
    private int width;
    private int height;

    public OperateImage() {
    }

    public OperateImage(int x, int y, int width, int height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

    /**
       * 对图片裁剪，并把裁剪完蛋新图片保存 。
     */
    public void cut() throws IOException {
        FileInputStream is = null;
        ImageInputStream iis = null;

        try {
            // 读取图片文件 
            is = new FileInputStream(srcpath);

            /*
             * 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader
             * 声称能够解码指定格式。 参数：formatName - 包含非正式格式名称 .
             *（例如 "jpeg" 或 "tiff"）等 。
            */
            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(
                    "jpg");
            ImageReader reader = it.next();
            // 获取图片流  
            iis = ImageIO.createImageInputStream(is);

            /*
             * <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。
             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader
             *  避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
            */
            reader.setInput(iis, true);

            /*
             * <p>描述如何对流进行解码的类<p>.用于指定如何在输入时从 Java Image I/O
             * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件
             * 将从其 ImageReader 实现的 getDefaultReadParam 方法中返回
             * ImageReadParam 的实例。
            */
            ImageReadParam param = reader.getDefaultReadParam();

            /*
             * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
             * 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。
            */
            Rectangle rect = new Rectangle(x, y, width, height);

            // 提供一个 BufferedImage，将其用作解码像素数据的目标。  
            param.setSourceRegion(rect);

            /*
             * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将
             * 它作为一个完整的 BufferedImage 返回。
              */
            BufferedImage bi = reader.read(0, param);

            // 保存新图片  
            ImageIO.write(bi, "jpg", new File(subpath));
        } finally {
            if (is != null) {
                is.close();
            }

            if (iis != null) {
                iis.close();
            }
        }
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public String getSrcpath() {
        return srcpath;
    }

    public void setSrcpath(String srcpath) {
        this.srcpath = srcpath;
    }

    public String getSubpath() {
        return subpath;
    }

    public void setSubpath(String subpath) {
        this.subpath = subpath;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public int getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }

    public static void main(String[] args) throws Exception {
        
        OperateImage o = new OperateImage(100, 100, 100, 100);
        o.setSrcpath("图片地址");
        o.setSubpath("裁剪之后存放地址");
        o.cut();
        System.out.println("裁剪成功");
    }
}

测试接口：

    //图片裁剪测试
    @RequestMapping(value="j/caijian")
    @ResponseBody
    public String caijian(int x,int y,int w,int h) throws Exception{
        
        OperateImage o = new OperateImage(x, y, w, h);
        o.setSrcpath("服务器图片地址");
        o.setSubpath("裁剪之后图片存放地址");
        o.cut();
        return "success";
    }