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;
    }
    

}