使用jquery jcrop插件进行图片的截取与保存
2014-11-27 14:25
337 查看
第一步:上传大图片到服务器,并且展示到页面
第二部:调用jcrop组件js及css
[html] view
plaincopy
<script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="${ctx}/css/jquery-jcrop/jquery.Jcrop.css" type="text/css" />
第三部:采用插件
进行图片的选取,其中主要包括x,y,width,height
[javascript] view
plaincopy
$('#cropButton').click(function(){
var x = $("#x").val();
var y = $("#y").val();
var w = $("#w").val();
var h = $("#h").val();
if(w == 0 || h == 0 ){
alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
return;
}
//alert("你要剪切图片的X坐标: "+x + ",Y坐标: " + y + ",剪切图片的宽度: " + w + ",高度:" + h );
if(confirm("确定按照当前大小剪切图片吗")){
//document.form1.submit();
//$("#makeHeadImgDiv").toggle();
function loadHeadUrl(data){
//alert(data.headUrl);
alert(data.retMsg);
$("#img_headUrl").attr("src",data.headUrl);
$("#headUrl").val(data.headUrl);
//alert($("#headUrl").val());
}
var url="${ctx}/admin/pri/guest/guest_cutHeadImg.action";
var options ={
//beforeSubmit: validate,
url: url,
success: loadHeadUrl,
type: 'post',
dataType: 'json'
};
$('#cutHeadImgFrm').ajaxSubmit(options);
}
});
然后调用后台方法切割图片。
设计的包:
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
第四部:保存新文件路径,展示图片到页面。
方法类:
[java] view
plaincopy
package com.wondertek.meeting.util;
import java.io.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
public class ImageCut {
/**
* 图像切割(改) *
* @param srcImageFile 源图像地址
* @param dirImageFile 新图像地址
* @param x 目标切片起点x坐标
* @param y 目标切片起点y坐标
* @param destWidth 目标切片宽度
* @param destHeight 目标切片高度
*/
public static void abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,
int destHeight) {
try {
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
if (srcWidth >= destWidth && srcHeight >= destHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
// 改进的想法:是否可用多线程加快切割速度
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(destWidth, destHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", new File(dirImageFile));
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 缩放图像
*
* @param srcImageFile 源图像文件地址
* @param result 缩放后的图像地址
* @param scale 缩放比例
* @param flag 缩放选择:true 放大; false 缩小;
*/
public static void scale(String srcImageFile, String result, int scale,
boolean flag) {
try {
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
int width = src.getWidth(); // 得到源图宽
int height = src.getHeight(); // 得到源图长
if (flag) {
// 放大
width = width * scale;
height = height * scale;
} else {
// 缩小
width = width / scale;
height = height / scale;
}
Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(image, 0, 0, null); // 绘制缩小后的图
g.dispose();
ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 重新生成按指定宽度和高度的图像
* @param srcImageFile 源图像文件地址
* @param result 新的图像地址
* @param _width 设置新的图像宽度
* @param _height 设置新的图像高度
*/
public static void scale(String srcImageFile, String result, int _width,int _height) {
scale(srcImageFile,result,_width,_height,0,0);
}
public static void scale(String srcImageFile, String result, int _width,int _height,int x,int y) {
try {
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
int width = src.getWidth(); // 得到源图宽
int height = src.getHeight(); // 得到源图长
if (width > _width) {
width = _width;
}
if (height > _height) {
height = _height;
}
Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(image, x, y, null); // 绘制缩小后的图
g.dispose();
ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 图像类型转换 GIF->JPG GIF->PNG PNG->JPG PNG->GIF(X)
*/
public static void convert(String source, String result) {
try {
File f = new File(source);
f.canRead();
f.canWrite();
BufferedImage src = ImageIO.read(f);
ImageIO.write(src, "JPG", new File(result));
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 彩色转为黑白
*
* @param source
* @param result
*/
public static void gray(String source, String result) {
try {
BufferedImage src = ImageIO.read(new File(source));
ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
ColorConvertOp op = new ColorConvertOp(cs, null);
src = op.filter(src, null);
ImageIO.write(src, "JPEG", new File(result));
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* @param args
*/
public static void main(String[] args) {
//晕。。。搞成多个了...
//cut("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg", 200, 150);
//ok
//gray("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg");
//convert("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.gif");
//scale("c:/images/5105049910001020110718648723.jpg", "c:/images/t/5105049910001020110718648725.jpg",154,166,157,208);
//scale("c:/images/rose1.jpg", "c:/images/t/rose1.jpg",154,166,157,208);
scale("c:/images/rose1.jpg", "c:/images/t/rose2.jpg",154,166,10,10);
}
}
第二部:调用jcrop组件js及css
[html] view
plaincopy
<script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="${ctx}/css/jquery-jcrop/jquery.Jcrop.css" type="text/css" />
第三部:采用插件
进行图片的选取,其中主要包括x,y,width,height
[javascript] view
plaincopy
$('#cropButton').click(function(){
var x = $("#x").val();
var y = $("#y").val();
var w = $("#w").val();
var h = $("#h").val();
if(w == 0 || h == 0 ){
alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
return;
}
//alert("你要剪切图片的X坐标: "+x + ",Y坐标: " + y + ",剪切图片的宽度: " + w + ",高度:" + h );
if(confirm("确定按照当前大小剪切图片吗")){
//document.form1.submit();
//$("#makeHeadImgDiv").toggle();
function loadHeadUrl(data){
//alert(data.headUrl);
alert(data.retMsg);
$("#img_headUrl").attr("src",data.headUrl);
$("#headUrl").val(data.headUrl);
//alert($("#headUrl").val());
}
var url="${ctx}/admin/pri/guest/guest_cutHeadImg.action";
var options ={
//beforeSubmit: validate,
url: url,
success: loadHeadUrl,
type: 'post',
dataType: 'json'
};
$('#cutHeadImgFrm').ajaxSubmit(options);
}
});
然后调用后台方法切割图片。
设计的包:
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
第四部:保存新文件路径,展示图片到页面。
方法类:
[java] view
plaincopy
package com.wondertek.meeting.util;
import java.io.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
public class ImageCut {
/**
* 图像切割(改) *
* @param srcImageFile 源图像地址
* @param dirImageFile 新图像地址
* @param x 目标切片起点x坐标
* @param y 目标切片起点y坐标
* @param destWidth 目标切片宽度
* @param destHeight 目标切片高度
*/
public static void abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,
int destHeight) {
try {
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
if (srcWidth >= destWidth && srcHeight >= destHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
// 改进的想法:是否可用多线程加快切割速度
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(destWidth, destHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", new File(dirImageFile));
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 缩放图像
*
* @param srcImageFile 源图像文件地址
* @param result 缩放后的图像地址
* @param scale 缩放比例
* @param flag 缩放选择:true 放大; false 缩小;
*/
public static void scale(String srcImageFile, String result, int scale,
boolean flag) {
try {
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
int width = src.getWidth(); // 得到源图宽
int height = src.getHeight(); // 得到源图长
if (flag) {
// 放大
width = width * scale;
height = height * scale;
} else {
// 缩小
width = width / scale;
height = height / scale;
}
Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(image, 0, 0, null); // 绘制缩小后的图
g.dispose();
ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 重新生成按指定宽度和高度的图像
* @param srcImageFile 源图像文件地址
* @param result 新的图像地址
* @param _width 设置新的图像宽度
* @param _height 设置新的图像高度
*/
public static void scale(String srcImageFile, String result, int _width,int _height) {
scale(srcImageFile,result,_width,_height,0,0);
}
public static void scale(String srcImageFile, String result, int _width,int _height,int x,int y) {
try {
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
int width = src.getWidth(); // 得到源图宽
int height = src.getHeight(); // 得到源图长
if (width > _width) {
width = _width;
}
if (height > _height) {
height = _height;
}
Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(image, x, y, null); // 绘制缩小后的图
g.dispose();
ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 图像类型转换 GIF->JPG GIF->PNG PNG->JPG PNG->GIF(X)
*/
public static void convert(String source, String result) {
try {
File f = new File(source);
f.canRead();
f.canWrite();
BufferedImage src = ImageIO.read(f);
ImageIO.write(src, "JPG", new File(result));
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 彩色转为黑白
*
* @param source
* @param result
*/
public static void gray(String source, String result) {
try {
BufferedImage src = ImageIO.read(new File(source));
ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
ColorConvertOp op = new ColorConvertOp(cs, null);
src = op.filter(src, null);
ImageIO.write(src, "JPEG", new File(result));
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* @param args
*/
public static void main(String[] args) {
//晕。。。搞成多个了...
//cut("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg", 200, 150);
//ok
//gray("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg");
//convert("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.gif");
//scale("c:/images/5105049910001020110718648723.jpg", "c:/images/t/5105049910001020110718648725.jpg",154,166,157,208);
//scale("c:/images/rose1.jpg", "c:/images/t/rose1.jpg",154,166,157,208);
scale("c:/images/rose1.jpg", "c:/images/t/rose2.jpg",154,166,10,10);
}
}
相关文章推荐
- 使用jquery jcrop插件进行图片的截取与保存
- 使用jquery jcrop插件进行图片的截取与保存
- 使用localResizeIMG插件上传图片到七牛云返回链接通过PHP进行保存
- 使用ueditor进行图片上传、保存、存入数据库
- iOS--使用MWPhotoBrowser进行图片保存
- NSFileManager的使用保存图片,并进行增删查改,还进入部分插入
- Java 使用imgAreaSelect插件进行图片上传切割
- html使用js截取页面保存为图片
- Jquery Jcrop 插件java的使用方法 包括图片保存类
- 使用ajaxfileupload插件实现异步上传并保存图片功能
- java使用文件或字节数组方式加载图片,并修改图片后进行保存、输出等
- Python---对html文件内容进行搜索取出特定URL地址字符串,保存成列表,并使用每个url下载图片,并保存到硬盘上,使用正则re
- Python---对html文件内容进行搜索取出特定URL地址字符串,保存成列表,并使用每个url下载图片,并保存到硬盘上,使用bs4,beautifulsoup模块
- iOS--使用MWPhotoBrowser进行图片保存滑动卡顿问题
- 使用.NET从SQL服务器保存和读取图片
- 使用C#进行图片的数据库存取
- 如何在Eclipse中使用Ruby开发工具(RDT)插件进行Ruby开发
- 使用VBA进行WPS插件开发[用VB开发]
- 在.net中使用GDI来提高gif图片的保存画质
- 使用流对象保存和显示图片