第一步:上传大图片到服务器,并且展示到页面
第二部:调用jcrop组件js及css
<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
$('#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;
第四部:保存新文件路径,展示图片到页面。
方法类:
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);
}
}
分享到:
相关推荐
这个插件允许用户在浏览器端对图片进行选择和裁剪,提供了丰富的API和灵活的配置选项,适用于各种图片处理需求。 1. **Jcrop基本概念** Jcrop的核心功能是提供一个可交互的选区,用户可以通过鼠标或触控设备在图片...
`jQuery jCrop` 就是一个这样的工具,它允许用户在上传图片前进行自由裁剪,确保上传的头像符合特定的尺寸要求。 ### 一、jCrop简介 `jCrop` 是一个基于jQuery的图像裁剪插件,它可以与HTML5的`...
`jQuery`监听文件输入元素的改变事件,当用户选择图片后,`jCrop`会自动对图片进行预加载并显示在页面上。用户可以通过鼠标操作在图片上划定需要剪切的部分,这个过程可以在上传前实时预览。一旦用户满意,点击上传...
1. **选择合适的插件**:有许多开源的jQuery插件可以实现图片截取功能,例如cropper.js、Jcrop等。这些插件已经封装好了复杂的图像处理逻辑,开发者只需要引入相应的JS和CSS文件,然后按照文档配置即可。 2. **HTML...
Jcrop是一款基于jQuery的开源图片裁剪插件,它为Web开发者提供了在浏览器端实现图片裁剪功能的强大工具。这款插件广泛应用于各种需要用户自定义选择图片区域的场景,如上传头像、图片预览和编辑等。下面将详细介绍...
jQuery jcrop插件是一个基于jQuery开发的JavaScript图像裁剪插件,它能够提供一个简单易用的用户界面来实现图像的自由裁剪。该插件在前端页面中可以快速搭建起一个图像的裁剪区域,并且允许用户拖动和缩放来选择裁剪...
2.使用了JCrop插件 3.可以选择背景色 4.控制选择框为1:1的比例 5.设置了选择框的最大范围和最小范围 6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的">...
综上所述,实现"JQUERY上传图片截取"功能需要结合jQuery进行前端交互,利用图片裁剪插件实现截取,后端使用PHP配合图像处理库处理截取和保存。在整个过程中,需要注意安全性、性能优化以及良好的用户交互设计。
标题“jcrop 截图 jquery”和描述中提到的技术主要涉及到前端图像处理,特别是使用jQuery库和jCrop插件实现网页上的图片截取功能。jCrop是一款基于jQuery的图片裁剪工具,它允许用户通过交互式界面选择图片的特定...
3. Jcrop插件的集成与使用: - 首先需要在HTML页面中引入jQuery和Jcrop的脚本文件。 - 创建一个用于显示图片的容器,并在该容器上初始化Jcrop插件。 - 通过回调函数,如onSelect、onChange等,可以获取剪裁区域的...
标题中的“好用的jquery图片截取”表明我们要讨论的是如何使用jQuery库来实现图片的裁剪功能。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个场景中,我们将关注...
本示例结合了Jcrop插件,提供了一种便捷的解决方案。Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端对上传的图片进行自由裁剪,然后将裁剪的坐标信息发送到后端,由PHP处理并保存。 首先,我们需要...
在IT领域,尤其是在网页开发中,常常需要处理与图像交互相关的功能,比如截取图片的特定部分或实现图片预览时的放大效果。本篇将详细介绍`Jcrop`和jQuery(JQ)如何协同工作来实现这些功能。 `Jcrop`是一个基于...
本教程将详细介绍如何结合Java和Jcrop插件实现这一功能。Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端选择并裁剪图像,然后将裁剪参数发送到后端,由后端程序进行实际的图片处理。 首先,我们需要...
2. **jQuery插件**:例如`cropper.js`或`jCrop`,它们提供了直观的用户界面和API,允许用户通过鼠标选择要截取的图像区域。这些插件通常包含拖动、缩放和旋转功能,以及预览和保存裁剪结果的能力。 3. **ASP.NET...
6. **JCrop**:这是一个基于 jQuery 的图像裁剪插件,它允许用户通过鼠标或触摸操作选取图片的任意部分进行裁剪。Jcrop 提供了丰富的配置选项和事件处理,可以轻松集成到 jQuery Mobile 应用中。 7. **事件处理**:...
开发者需要编写接口,接收前端发送的裁剪参数,然后根据这些参数对上传的原始图片进行裁剪。 在项目中,`imageDispose`可能是指与图像处理相关的资源文件,如CSS样式表、JavaScript脚本、示例图片或者服务器端处理...
"JQ头像截取插件"就是专门针对这一需求而设计的一个工具,它允许用户在上传图片时进行区域选择,确保他们能精确地截取自己想要展示的部分作为头像。下面我们将详细讨论这个插件以及其相关的技术知识点。 首先,"JQ...
通过接收Jcrop传来的坐标,计算出需要截取的图像部分,并保存为新的图片文件。而在Java环境中,如使用JavaFX或Java图像处理库如ImgLib2,同样能实现类似的功能。 总的来说,Jcrop v0.9.12凭借其丰富的功能和易用性...
2. **产品图片编辑**:在线电商网站中,用户可以使用Jcrop裁剪产品图片,以适应不同的展示位置和尺寸。 3. **图片分享**:社交媒体平台中,用户可以通过Jcrop选取图片的精彩部分,制作个性化的分享图片。 六、扩展...