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