JS+JAVA裁图

本文主要介绍Java层面对图片进行裁剪的过程，下面的实例没有截图动画，如需截图动画及其他要求可使用JCROP

JCROP地址: http://deepliquid.com/content/Jcrop.html

具体实例如下：

取照片，以（0,0）坐标开始，以较短边为正方形边长，截取最大正方形。

js代码：

function cutImage(name) { //name为裁剪图片名称
　　var image = new Image();
　　image.src = imgUrl + "/" + name; //图片全路径
　　image.onload = function() {
　　var s;
　　if (image.width <= image.height) {
　　　　s = image.width;
　　} else {
　　　　s = image.height;
　　}
　　var param = {};
　　param.x = 0;
　　param.y = 0;
　　param.w = s;
　　param.h = s;
　　param.bigImage = image.src;
　　$.ajax({
　　　　url : config.SERVER_URL + ‘/common/cutImage‘,
　　　　type : ‘POST‘,
　　　　contentType : ‘application/x-www-form-urlencoded‘,
　　　　data : param,
　　　　success : function(e, data) {
　　　　　　if (e.status != 200) {
　　　　　　　　alert( "上传失败");
　　　　　　　　return;
　　　　　　}
　　　　　　alert( "上传成功");
　　　　　},
　　　　error : function(e) {
　　　　　　alert( "上传失败");
　　　　}
　　});
}
}

后台Java：

@RequestMapping(value = "/cutImage", method = RequestMethod.POST, consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
/** "裁剪图片"　*  bigImage:需裁剪图片路径  *  x : 坐标X轴起点  *  y : 坐标Y轴起点  *  w : 截取宽度  *  h : 截取高度  */
    public SimpleResponse cutImage(@RequestParam("bigImage") String bigImage, @RequestParam("x") String x,
            @RequestParam("y") String y, @RequestParam("w") String w, @RequestParam("h") String h) {
        File file = null;
        try {
            int xInt = Integer.valueOf(x);
            int yInt = Integer.valueOf(y);
            int wInt = Integer.valueOf(w);
            int hInt = Integer.valueOf(h);

            // 文件正式路径
            String imagePath = bigImage;
            // 切割图片
            ImageCut imageCut = new ImageCut();
            file = imageCut.cutImage(imagePath, xInt, yInt, wInt, hInt);

            byte[] bytes =FileUtils.readFileToByteArray(file);
            // 上传剪裁后的文件
            return uploadPicture(bytes);

        } catch (Exception e) {
            throw new LiveException(LiveCode.FILE_UPLOAD_ERROR);
        } finally {
            FileUtils.deleteQuietly(file);
        }
    }

工具类：

package com.utils;

import javax.imageio.ImageIO;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;

public class ImageCut {

     /**
     * 图片切割
     * @param imagePath  原图地址
     * @param x  目标切片坐标 X轴起点
     * @param y  目标切片坐标 Y轴起点
     * @param w  目标切片 宽度
     * @param h  目标切片 高度
     */
    public File cutImage(String imagePath, int x ,int y ,int w,int h){
        File file = null;
        File imageFile = null;
        try {
            Image img;
            ImageFilter cropFilter;
            imageFile = loadFile(imagePath);    //因为图片地址为URL，需先下载图片到本地

            // 读取源图像
            BufferedImage bi = ImageIO.read(imageFile);
            int srcWidth = bi.getWidth();      // 源图宽度
            int srcHeight = bi.getHeight();    // 源图高度  

            //若原图大小大于切片大小，则进行切割
            if (srcWidth >= w && srcHeight >= h) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);  

                cropFilter = new CropImageFilter(x, y, w, h);
                img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
                BufferedImage tag = new BufferedImage(w, h,BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, null); // 绘制缩小后的图
                g.dispose();
                // 输出为文件
                file = new File(System.getProperty("user.dir")+"final"+ System.currentTimeMillis() +".jpg");   //用时间戳作为文件名可以避免并发问题
                ImageIO.write(tag, "JPEG", file);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            FileUtils.deleteQuietly(imageFile);
        }
        return file;
    }  

    public File loadFile(String imagePath){
        URLConnection con = null;
        OutputStream os = null;
        InputStream is = null;
        File file = null;
        try {
            // 构造URL
            URL url = new URL(imagePath);
            // 打开连接
            con = url.openConnection();
            // 输入流
            is = con.getInputStream();
            // 1K的数据缓冲
            byte[] bs = new byte[1024];
            // 读取到的数据长度
            int len;
           file = new File(System.getProperty("user.dir")+"template"+ System.currentTimeMillis() +".jpg");
            // 输出的文件流
            os = new FileOutputStream(file);
            // 开始读取
            while ((len = is.read(bs)) != -1) {
                os.write(bs, 0, len);
            }
            os.flush();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            // 完毕，关闭所有链接
            IOUtils.close(con);
            IOUtils.closeQuietly(is);
            IOUtils.closeQuietly(os);
        }

        return file;
    }

}