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";
}
Java+jquery实现裁剪图片上传到服务器的更多相关文章
- jquery.cropper 裁剪图片上传
https://github.com/fengyuanchen/cropper 1.必要的文件引用: <script src="/path/to/jquery.js"> ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- php form 图片上传至服务器上
本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...
- Jquery插件-Html5图片上传并裁剪
/** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:f ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- java网络编程之图片上传
输入输出流核心代码 所有的文件传输都是靠流,其中文件复制最具代表性.输入流和输出流,从输入流中读取数据写入到输出流中. InputStream in = 输入源; OutputStream os = ...
- 根目录97 <input file>标签,把图片上传到服务器(跟增删改查一起实现)
首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...
- Express+MySQL实现图片上传到服务器并把路径保存到数据库中
demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...
随机推荐
- Hive基本语法操练
建表规则如下: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col_comment ...
- JVM之PC寄存器(Program Counter Register)
基本特性: 当前线程执行的字节码的行号指示器. Java虚拟机支持多个线程同时执行,每一个线程都有自己的pc寄存器. 任意时刻,一个线程都只会执行一个方法的代码,称为该线程的当前方法,对于非nativ ...
- Python基础2
入门知识拾遗 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 1==1: name = 'yuxiaozheng' print name 外层变量,可以被 ...
- MongoDB学习笔记~自己封装的Curd操作(按需更新的先决条件)
回到目录 我们上一讲中介绍了大叔封装的Mongo仓储,其中介绍了几个不错的curd操作,而对于按需更新内部子对象,它是有条件的,即你的子对象不能为null,也就是说,我们在建立主对象时,应该为子对象赋 ...
- [Java入门笔记] 面向对象三大特征之:封装
了解封装 什么是封装? 在Java的面向对象程序设计中,有三大基本特征:封装.继承和多态.首先我们先来看看封装: 在Java的面对对象程序设计中,封装(Encapsulation)是指一种将函数功能实 ...
- hive建表与数据的导入导出
建表: create EXTERNAL table tabtext(IMSI string,MDN string,MEID string,NAI string,DestinationIP string ...
- sublime text3的一些插件安装方法和使用
sublime text部分插件使用方法在线安装package Control的方法: ctrl+~ 输入如下代码: import urllib2,os; pf='Package ...
- eclipse svn分支与合并操作
以前做项目的时候没有用过svn的分支合并操作,今天用到了,刚开始还真不会啊.最后查了下就是这么的方便.专门记录下来. 原文来自:http://blog.csdn.net/lisq037/article ...
- Java连接SQLServer2008终极解决办法(亲身上机演练版)
今天我一学妹问我,Java连接SQLServer2008数据库的问题,一直无法连接成功.想起自己刚开始学习的时候,在网上找各种文章,然后实际上机验证操作,花了一两天时间才搞定,一把辛酸泪呀!记得当时是 ...
- STM32电机控制器小心得
首先声明的是本人刚刚大学毕业进入电机控制这个行业,以前在学校也做过类似51的实验,然而在工作中发现那些东西是皮毛的不能再皮毛,我现在在公司也算是一个实习生,主要工作是改各厂家对控制器的功能需求,(其实 ...