`

jQuery与Java实现图片的剪切

 
阅读更多
一 参考资料
1 jquery Jcrop 头像，logo截图 
http://terje.blog.163.com/blog/static/11924371201101311319664/
2 javascript+java截取图像，图像处理
http://www.blogjava.net/b47248054/articles/200685.html
3 js+java 截取照片中的头像
http://blog.csdn.net/dsj188/article/details/4313662
4 java+jsp 截头像图片
http://ldf2008rw.iteye.com/blog/502793
5 Java生成缩略图之Thumbnailator
http://rensanning.iteye.com/blog/1545708
Thumbnailator 是一个为Java界面更流畅的缩略图生成库。从API提供现有的图像文件和图像对象的缩略图中简化了缩略过程，两三行代码就能够从现有图片生成缩略图，且允许微调缩略图生成，同时保持了需要写入到最低限度的代码量。同时还支持根据一个目录批量生成缩略图。 http://code.google.com/p/thumbnailator/这个不错！支持！

二 解决思路
1 通过smart-upload文件上传组件将图片上传到服务器,并得到图片文件地址传递到前台的img组件显示
2 在客户端用JS获取图片X坐标,Y坐标,宽度和高度这四个参数并设置到隐藏元素.
3 java后台根据图片关键的四个参数实现图片剪切并在服务器端生成图片文件
4 通过生成图片的地址在前台展现
开发环境: XP3
开发工具: JDK1.6+MyEclipse6.5+Tomcat6
工程图片:

三 实现方式
1 选用JQuery插件：Jcrop
官方网站：http://deepliquid.com/content/Jcrop.html
项目地址：http://code.google.com/p/jcrop/
效果图片如下：

2 通过图片剪切工具类,主要代码如下： 
/** 
     * 图像切割（改）     * 
     * @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();
        }
    }


四 具体代码如下:
1 index.jsp(上传图片页面) 
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    	
	<script src="/scripts/clearFile.js" type="text/javascript"></script>
	<script type="text/javascript">
	
		/**检查图片上传类型*/		
		 function checkImgType(obj){
		 
		  var imgFile = '';	
		  //获取图片的全路径
		  var imgFilePath = getImgFullPath(obj);	 
		  var endIndex = imgFilePath.lastIndexOf("\\");
		  var lastIndex = imgFilePath.length-endIndex-1;
		  if (endIndex != -1)
		     imgFile= imgFilePath.substr(endIndex+1,lastIndex);
		  else
		  	 imgFile = imgFilePath;		
		  	
		  var tag = true;	 	  	 
		  endIndex = imgFilePath.lastIndexOf(".");			 
		  if (endIndex == -1) 
		    tag = false;
		    
		  var ImgName = imgFilePath.substr(endIndex+1,lastIndex);
		  ImgName = ImgName.toUpperCase();		  
		 
		  if (ImgName !="GIF" && ImgName !="JPG" && ImgName !="PNG" && ImgName !="BMP"){ 
		      tag=false;
		  }
		  if (!tag) {
		      alert("上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!")
		      Upload.clear(obj);			      	 
		 	  return false;
		  }   
		  document.form1.submit();
	  }
		
		function getImgFullPath(obj) {
		    if (obj) {  
		       //ie  
		       if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
		           obj.select();  
		           return document.selection.createRange().text;  
		       }  
		       //firefox  
		       else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
		           if (obj.files) {  
		               return obj.files.item(0).getAsDataURL();  
		           }  
		           return obj.value;  
		       }         
		       return obj.value;  
		   }  
		} 
	</script>
	
  </head>  
  <body>
    <form name=form1 method=post enctype="multipart/form-data" action="<%=path%>/imgUpload">
    	<div style="margin-left: 35%;margin-top: 20%">
    	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >    	   
          <tr>              
               <td >&nbsp;图片上传<font color='red'>*.gif,*.jpg,*.png,*.bmp</font></td>              
           </tr>  
           <tr>   
               <td width="80%">            	
		         <input type="file" name="imgFile" id="imgFile" maxlength="160" onchange="checkImgType(this);" width="300px"/>&nbsp;	                     
		       </td>    
           </tr>               
    	</table>  
       </div>
    </form>
  </body>
</html>

2 ImgUploadServlet.java(图片上传处理类) 
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ImgUploadServlet extends HttpServlet {


	private static final long serialVersionUID = 1L;
	public static final String IMGROOT = "/uploads/";
	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
		String userWebAppPath = getWebAppPath();
		/**检查是否有图片上传文件夹*/
		checkImageDir(userWebAppPath);	
		
		/**图片上传的相对路径*/
		String imgUploadPath = null;
		String imgWebAppPath = null;
		/**图片后缀*/
		String imgFileExt = null;
		
		/**图片名称:以当前日期*/
		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddhhmmss");
		String imgFileId = formatter.format(new Date());
		
		//图片初始化高度与宽度
		String width = null;
		String height = null;
		
		int imgWidth = 0;
		int imgHeight = 0;

		try {
			
			com.jspsmart.upload.SmartUpload smartUpload = new com.jspsmart.upload.SmartUpload();
			smartUpload.initialize(getServletConfig(), request, response);
			smartUpload.upload();
			com.jspsmart.upload.Request rqest = smartUpload.getRequest();
			
			//指定图片宽度和高度
			width = rqest.getParameter("width");
			if(null == width){
				width = "700";
			}
			height= rqest.getParameter("height");	
			if(null == height){
				height = "600";
			}
			
			imgWidth = Integer.parseInt(width);
			imgHeight = Integer.parseInt(height);
			
			
			//文件个数
			int fileCounts =  smartUpload.getFiles().getCount();	
		
			for (int i = 0; i <fileCounts; i++) {
				com.jspsmart.upload.File myFile = smartUpload.getFiles().getFile(i);
				
				if (!myFile.isMissing()) {
					
					imgFileExt = myFile.getFileExt();
					//组装图片真实名称
					imgFileId += i + System.currentTimeMillis() + "." + imgFileExt;
					
					//图片生成路径
					imgWebAppPath = userWebAppPath + imgFileId;
					
					//生成图片文件
					myFile.saveAs(imgWebAppPath);
					//图片的相对路径
					imgUploadPath = IMGROOT + imgFileId;
					
					//检查图片大小
					BufferedImage src = ImageIO.read(new File(imgWebAppPath)); // 读入文件						 
					int imgSrcWidth = src.getWidth(); // 得到源图宽							 
					//重新指定大小
					imgWidth = imgSrcWidth > imgWidth ? imgWidth : imgSrcWidth;
					
					int imgSrcHeight = src.getHeight(); // 得到源图长
					imgHeight = imgSrcHeight > imgHeight ? imgHeight : imgSrcHeight;
				
					//按照图片的设置大小生成
					ImageCut.scale(imgWebAppPath, imgWebAppPath,imgWidth,imgHeight);
					 File f = new File(imgWebAppPath);								
					 if(f.exists()){						
						 System.out.println("创建"+imgWidth+"*"+imgHeight+"图片成功");
					 }					
				}
				
			}
			
		}catch(Exception ex){
			ex.printStackTrace();
		}
		
		String path = "/imgcrop.jsp?tag=0&oldImgPath="+imgUploadPath+"&imgFileExt="+imgFileExt+"&imgRoot="+IMGROOT+"&width="+imgWidth+"&height="+imgHeight;
		System.out.println("path: "+path);
		request.getRequestDispatcher(path).forward(request,response);
		
	}
	
	private String getWebAppPath(){
		String webAppPath = this.getServletContext().getRealPath("/");		
		String userWebAppPath = webAppPath+IMGROOT;
		return userWebAppPath;
	}

	private void checkImageDir(String userWebAppPath) {		
		 File file = new File(userWebAppPath);
		 if(!file.exists()){
			 file.mkdir();
		 }
	}
}

3 imgcrop.jsp(图片展现并剪切页面) 
<%@ page language="java"  pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title>图片剪辑</title>    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="styles/jquery.Jcrop.css" type="text/css" />
	<link rel="stylesheet" href="styles/demos.css" type="text/css" />	
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.Jcrop.js"></script>		
  </head>  
 <body STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN;OVERFLOW-Y:HIDDEN'>
 	
    <form name=form1 method=post action="<%=path%>/imgCrop">
    	
    	<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0" >    	   
           <tr>    
               <td id="cropTd" style="display:none"><input type="button" value="剪切照片" id="cropButton"/></td>    
           </tr>   
           
            <tr>              
              <td id="imgTd" style="width:${param.width}px;height:${param.height}px;" align="center" style="padding-top:5px;">    
              	 <c:choose>
              	 	<c:when test="${param.tag eq 0}">
              	 		<img  src="<%=path%>${param.oldImgPath}" id="imgCrop" name="imgCrop" border="0" />     
              	 	</c:when>
              	 	<c:when test="${param.tag eq 1}">
              	 		<img  src="<%=path%>${param.imgName}" id="imgCrop" name="imgCrop" border="0" />    
              	 	</c:when>
              	 </c:choose>  
            </td>               
           </tr> 
             
            <tr>  
               <td>
               	     <label>X1 <input type="text" size="4" id="labelX" name="labelX" /></label>
					<label>Y1 <input type="text" size="4" id="labelY" name="labelY" /></label>
					<label>X2 <input type="text" size="4" id="labelX2" name="labelX2" /></label>
					<label>Y2 <input type="text" size="4" id="labelY2" name="labelY2" /></label>
					<label>W <input type="text" size="4" id="labelW" name="labelW" /></label>
					<label>H <input type="text" size="4" id="labelH" name="labelH" /></label>
               </td>    
           </tr>
           
            <tr>  
               <td  colspan="2"><a href="index.jsp">返回上传图片</a></td>    
           </tr>            
     </table>
    
	<input type="hidden"  id="x" name="x" />
	<input type="hidden"  id="y" name="y" />
	<input type="hidden"  id="x2" name="x2" />
	<input type="hidden"  id="y2" name="y2" />
	<input type="hidden"  id="w" name="w" />
	<input type="hidden"  id="h" name="h" />  
	
	<!-- 源图片宽度和高度 -->
	<input type="hidden"  id="width" name="width" value="${param.width}"/>  
	<input type="hidden"  id="height" name="height" value="${param.height}"/>
	<input type="hidden"  id="oldImgPath" name="oldImgPath" value="${param.oldImgPath}"/>  
	<input type="hidden"  id="imgRoot" name="imgRoot" value="${param.imgRoot}"/>	
	<input type="hidden"  id="imgFileExt" name="imgFileExt" value="${param.imgFileExt}"/>	
	
    </form>
  </body>
</html>
<script type="text/javascript">

	jQuery(document).ready(function(){		
	
		
		jQuery('#imgCrop').Jcrop({
			onChange: showCoords,
			onSelect: showCoords
		});	
		
		jQuery('#cropButton').click(function(){
			    var x = jQuery("#x").val();
				var y = jQuery("#y").val();
				var w = jQuery("#w").val();
				var h = jQuery("#h").val();			
				
				if(w == 0 || h == 0 ){
					alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
					return;
				}	
				alert("你要剪切图片的X坐标: "+x + ",Y坐标: " + y + ",剪切图片的宽度: " + w + ",高度：" + h );
				if(confirm("确定按照当前大小剪切图片吗")){				
					document.form1.submit();
				}
		 });
		
	
	});
	
	function showCoords(c)
	{
		jQuery('#x').val(c.x);
		jQuery('#y').val(c.y);
		jQuery('#x2').val(c.x2);
		jQuery('#y2').val(c.y2);
		jQuery('#w').val(c.w);
		jQuery('#h').val(c.h);	
		
		jQuery('#labelX').val(c.x);
		jQuery('#labelY').val(c.y);
		jQuery('#labelX2').val(c.x2);
		jQuery('#labelY2').val(c.y2);
		jQuery('#labelW').val(c.w);
		jQuery('#labelH').val(c.h);	
		
		//显示剪切按键
		jQuery('#cropTd').css("display","");
				
	}
</script>

4 ImgCropServlet.java(执行图片剪切类) 
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImgCropServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		System.out.println("x: " + request.getParameter("x") + "," + request.getParameter("y") + "," + request.getParameter("w") + "," + request.getParameter("h"));

		// 用户经过剪辑后的图片的大小
		Integer x = Integer.parseInt(request.getParameter("x"));
		Integer y = Integer.parseInt(request.getParameter("y"));
		Integer w = Integer.parseInt(request.getParameter("w"));
		Integer h = Integer.parseInt(request.getParameter("h"));
		
		//获取原显示图片路径
		String oldImgPath = request.getParameter("oldImgPath");
		//图片后缀
		String imgFileExt = request.getParameter("imgFileExt");
		String imgRoot =  request.getParameter("imgRoot");
		
		Integer width = Integer.parseInt(request.getParameter("width"));
		Integer height = Integer.parseInt(request.getParameter("height"));
		
		//WEB应用程序根路径
		String webAppPath = getServletContext().getRealPath("/");
		
		/**图片名称:以当前日期*/
		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddhhmmss");
		String imgFileId = formatter.format(new Date());
		String imgName =  imgRoot + imgFileId + System.currentTimeMillis() + "." + imgFileExt;			
		//组装图片真实名称
		String createImgPath = webAppPath + imgName;
		
		//之前上传的图片路径
		webAppPath += oldImgPath;
		
		System.out.println("原图片路径: " + webAppPath + ",新图片路径: " + createImgPath);
		
		//进行剪切图片操作
		ImageCut.abscut(webAppPath, createImgPath, x,y,w, h);
		
		 File f = new File(createImgPath);								
		 if(f.exists()){						
			 System.out.println("剪切图片大小: "+w+"*"+h+"图片成功!");
		 }	
		 
		String path = "/imgcrop.jsp?tag=1&oldImgPath="+oldImgPath+"&imgFileExt="+imgFileExt+"&imgRoot="+imgRoot + "&imgName="+imgName+"&height=" + height + "&width=" + width;
		System.out.println("imgCrop: " + path);
		request.getRequestDispatcher(path).forward(request,response);
	}

}

5 ImageCut.java(图片剪切工具类) 
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();
		}
	}	
}
  • 大小: 50.6 KB
  • 大小: 25.2 KB
分享到：
| IE下调试JS的小工具-CompanionJS
评论
28 楼 199310290808 2015-12-01  
[u][u][u][u][u][u][u][u][u][u]46545646[/u][/u][/u][/u][/u][/u][/u][/u][/u][/u]
27 楼 jialadykiller 2015-08-18  
非常感谢
26 楼 当里个当1 2015-07-22  
学习了，非常感谢
25 楼 xiajinqian 2015-01-29  
很不错，谢谢！
24 楼 913545731lin 2014-12-22  
为什么不能下载源码？
23 楼 静坛使者 2014-09-28  
hezhoujun 写道
解决了我的难题，谢谢你！想加你的qq成为好友

我可以也加嘛？真的挺好的 代码
22 楼 xiaocaon 2014-09-10  
21 楼 zuoguiyefengliu 2014-09-03  
abscut方法截取有问题，右边生成黑色边框如何解决？？
20 楼 u010272442 2014-06-24  
那个，问一下，smart-upload包干啥的啊？
19 楼 大大粒 2014-05-20  
你好，请问我想限制选择框的宽和高，请问在哪里限制？
18 楼 hezhoujun 2014-04-02  
解决了我的难题，谢谢你！想加你的qq成为好友
17 楼 1807151593 2013-06-14  
真心谢谢~~~
16 楼 liuzidong 2012-11-29  
工程在附件中呀，直接下载就是了，文章上面也有直接的代码呀
15 楼 majingxia989 2012-11-27  
楼主能分享一下工程吗？愁死我了
14 楼 majingxia989 2012-11-27  
楼主能分享一下工程吗
13 楼 tiankong6622 2012-09-19  
12 楼 king520 2012-08-22  
学习下！ 
11 楼 huakaihualuo1223 2012-08-18  
liuzidong 写道
1 我是用的是：0.9.8的版本获取的
2 你可以在js中作个处理吧

多谢楼主，我在java里把小数部分舍弃了，基本没多少影响
10 楼 liuzidong 2012-08-17  
1 我是用的是：0.9.8的版本获取的
2 你可以在js中作个处理吧
9 楼 huakaihualuo1223 2012-08-15  
liuzidong 写道
Jcrop插件获取的只是整数！具体看它的实现吧！

最新jcrop插件确实可以获得小数，我是做项目的时候遇到了这个问题，出现了异常，你可以试一下截图
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery 及插件实现图片剪切分割上传服务器

    总的来说，"JQuery 及插件实现图片剪切分割上传服务器"是一种将前端交互与后端处理相结合的技术实践，它使得用户可以在浏览器中方便地裁剪图片，并将其安全、高效地上传到服务器，为Web应用增加了丰富的图像处理功能...

    头像剪切上传jquery+java源码

    总结来说，这个项目展示了如何结合jQuery和Java实现一个头像剪切上传的功能，涉及到前端的图像选取和裁剪、AJAX通信，以及后端的图片处理和存储。对于学习和理解前后端交互、图像处理和文件上传等技术具有很好的实践...

    JAVA实现的图片剪切预览

    本项目聚焦于使用JAVA实现图片的剪切预览功能，并结合JQUERY前端控件来提供用户友好的交互体验。以下将详细阐述相关知识点。 首先，让我们关注“JAVA实现的图片剪切预览”这一主题。在Java中，处理图片主要依靠Java...

    jquery上传头像图片剪切

    在"jquery上传头像图片剪切"中，jQuery负责处理用户与页面的交互，例如监听文件输入控件的change事件，当用户选择图片后触发上传过程。 接着，JavaScript在前端起到了关键作用。它用于实现图片预览、图片裁剪和尺寸...

    jsp+jquery（jcrop）实现的图片预览剪切上传

    总的来说，`jsp+jquery（jcrop）实现的图片预览剪切上传`项目是一个实用的示例，它展示了如何利用现有技术栈解决实际问题。开发者可以在此基础上进行定制，适应各种不同的图片处理需求，例如添加更多图片格式的支持...

    jQuery-photoClip-master 图片上传剪切

    `img`目录可能包含了插件所需的图片资源，例如图标、占位符图像或者其他与图片裁剪相关的图形元素。开发者可以根据需要在这个目录下添加或替换图片。 `js`目录则包含了JavaScript代码，其中最核心的部分应该是实现...

    Java 实现头像的剪切和上传功能

    2. **jQuery ImgCrop**：这个库提供了强大的图片剪切功能，通过JavaScript与HTML元素交互，设置剪切区域并获取剪切参数。 - 引入jQuery库和jQuery ImgCrop库的JS和CSS文件。 - 初始化ImgCrop插件，设置剪切区域的...

    jquery+jsp+smartUpload图片剪切上传

    标题中的“jquery+jsp+smartUpload图片剪切上传”是一个基于jQuery、JSP和SmartUpload技术实现的图片裁剪并上传的功能。这个功能通常用于网页上的图像处理，允许用户在选择图片后进行预览和裁剪，然后将裁剪后的图片...

    struts2加jquery加Jcrop实现头像剪切上传

    自己通过ajaxfileupload.js结合struts2实现图片上传文件，并通过jcrop和java图像处理功能实现了图片剪切的功能。该功能效果和新浪QQ的头像上传功能效果一样，在ie下可以正常使用 火狐下更换图片时效果样式会走形

    jquery 图片剪切

    总结一下，jQuery图片剪切结合Java后端，为用户提供了一种直观且易于实现的图片裁剪方案。通过Jcrop插件，前端可以方便地实现用户交互和选区操作，而Java则负责复杂的图像处理和数据传输，两者结合实现了前后端分离...

    struts2加jquery加Jcrop实现头像剪切上传项目版(添加jar包部署就可以运行)

    在这个项目中，我们主要关注如何利用这些技术实现一个头像剪切并上传的功能。 首先，Struts2是一个基于MVC设计模式的Java Web框架，它提供了一种组织应用程序的方式，使得开发者可以更加专注于业务逻辑，而不是底层...

    java 切割图片 可预览，完整效果

    本文将深入探讨如何使用Java实现这个功能，包括图片上传、预览以及剪切的完整流程。 首先，我们需要理解图片上传的基本概念。在Web应用中，通常会通过HTML表单和元素来让用户选择本地图片文件。当用户提交表单时，...

    struts2结合jquery剪切图片

    当将Struts2与jQuery结合时，可以实现复杂的前端交互功能，如图片剪切。 在描述中提到的"图片剪切"功能，主要是指用户可以上传一张图片，并在前端界面上选择图片的某一部分进行裁剪，然后将裁剪后的图像数据发送到...

    java flash头像剪切上传

    总结，实现"java flash头像剪切上传"需要结合Java后端处理文件上传，前端使用Flash组件（如SWFUpload）或HTML5特性，以及JavaScript库（如cropper.js）实现裁剪功能。整个过程中，还需要注意文件安全性和用户体验的...

    图片剪切 旋转 放大 cropzoom java jsp

    本篇文章将深入探讨“图片剪切、旋转和放大”这一主题，以及如何在Java JSP环境中使用cropzoom库来实现这些功能。首先，我们要理解图片处理的基本概念。 图片剪切允许用户选取图像的一部分并保存为新的图像，这在...

    java上传剪切头像

    总的来说，"java上传剪切头像"这个项目涉及了前端交互、图片处理、文件上传、后端处理等多个环节，需要综合运用到Java和jQuery的知识，以及对Web安全和用户体验的理解。通过实现这样一个功能，开发者可以提升自己的...

    上传头像图片带预览剪切JAVA版-兼容所有浏览器.zip

    - 图片剪切通常通过JavaScript库如jQuery UI的Resizable和Draggable插件，或者专门的图片裁剪库如Cropper.js来实现。用户可以通过拖动和调整裁剪框来选择要保留的部分。 - 在Flash环境中，可以使用AS3的图形API...

    jsp 图片上传 剪切

    总结起来，实现JSP中的图片上传和剪切功能需要理解文件上传的处理机制、选择合适的图像处理库以及处理前端与后端的交互。在实际项目中，还应考虑错误处理、安全措施（如防止恶意文件上传）以及性能优化等问题。通过...

    struts2上传下载+前端剪切图片

    前端图片剪切通常使用JavaScript库，如jQuery的Cropper插件或Pure JavaScript的Cropper.js。用户选择图片后，这些库允许在浏览器中预览并剪切图像。剪切参数（如裁剪区域的坐标和大小）可以发送到服务器，服务器根据...

    Jcrop图片剪切

    【Jcrop图片剪切】是一种基于JavaScript的图片裁剪库，它允许用户在网页上自由选择图片的裁剪区域，从而实现自定义的图片尺寸调整。Jcrop是轻量级的，易于集成到任何Web项目中，尤其适用于需要提供用户交互式图片...

Magicbox
Global site tag (gtag.js) - Google Analytics