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

转载于:https://www.cnblogs.com/cnsevennight/p/4142808.html

• 点赞
• 收藏
• 分享
• 文章举报