大体分两步:

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

Java+jquery实现裁剪图片上传到服务器的更多相关文章

  1. jquery.cropper 裁剪图片上传

    https://github.com/fengyuanchen/cropper 1.必要的文件引用: <script src="/path/to/jquery.js"> ...

  2. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  3. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. php form 图片上传至服务器上

    本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...

  5. Jquery插件-Html5图片上传并裁剪

    /** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:f ...

  6. JQuery插件:图片上传本地预览插件,改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  7. java网络编程之图片上传

    输入输出流核心代码 所有的文件传输都是靠流,其中文件复制最具代表性.输入流和输出流,从输入流中读取数据写入到输出流中. InputStream in = 输入源; OutputStream os = ...

  8. 根目录97 <input file>标签,把图片上传到服务器(跟增删改查一起实现)

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

  9. Express+MySQL实现图片上传到服务器并把路径保存到数据库中

    demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...

随机推荐

  1. .Net缓存管理框架CacheManager

    using System; using CacheManager.Core; namespace ConsoleApplication { class Program { static void Ma ...

  2. SQL Server Reporting Services:无法检索应用程序文件。部署中的文件已损坏

    如果在客户端计算机上启动Microsoft SQL Server 2012的 ClickOnce 版本的 Microsoft SQL Server 报表生成器时出现"无法检索应用程序文件.部 ...

  3. SSRS 2008 R2 错误:Timeout expired. The timeout period

    今天遇到了Reporting Services(SQL SERVER 2008 R2)的报表执行异常情况,报表加载数据很长时间都没有响应,最后报"An error occurred with ...

  4. 0031 Java学习笔记-梁勇著《Java语言程序设计-基础篇 第十版》英语单词

    第01章 计算机.程序和Java概述 CPU(Central Processing Unit) * 中央处理器 Control Unit * 控制单元 arithmetic/logic unit /ə ...

  5. PostgreSQL-角色、库、模式、表

    由于不了解postgresql的psql工具,安装完数据库后就直接用pgadmin或navicat来连接操作,在确认初始化后的库中默认有些什么东西后竟然一直无处下手,在还没有了解pg大致体系的情况下搞 ...

  6. YARN资源调度器

    YARN资源调度器 转载请注明出处:http://www.cnblogs.com/BYRans/ 概述 集群资源是非常有限的,在多用户.多任务环境下,需要有一个协调者,来保证在有限资源或业务约束下有序 ...

  7. 联发科发布全球首款搭载Android TV的智能电视系统芯片MT5595

    联发科发布全球首款搭载Android TV的智能电视系统芯片MT5595 admin 资讯 01-07 1 1月7日消息,联发科宣布与Google共同开发出全世界第一个搭载Android TV操作系统 ...

  8. 【Windows编程】系列第十篇:文本插入符

    大家知道,在使用微软的编程环境创建工程时会让你选择是控制台模式还是Windows应用程序.如果选择控制台的console模式,就会在运行时出现一个黑洞洞的字符模式窗口,里面就有等待输入一闪一闪的插入符 ...

  9. Shiro - 限制并发人数登录与剔除

    import org.apache.shiro.cache.Cache; import org.apache.shiro.cache.CacheManager; import org.apache.s ...

  10. JSP前三章测试改错

    分析:文件.数据库都是持久化保存数据的,所以是正确的,而servletcontext是上下文对象当然也可以.所以正确答案为A 分析: A:判断学员是否手动安装过Tomcat(练习熟练度) B:使学员了 ...