java使用Jcrop剪切图片并保存


    这个实例,附有源码,给出源码的原因是这个实在没有难度,但是却很繁琐的事情,经过这个实例我再也不相信网上的内容,都TMD互抄,没有一点使用价值,给学习带来了不少负面影响,都是一些没有实战的乱弹,叫老夫走了不少弯路!

    不得不抱怨啊,个人能力真的有限……;前些天,没有压力的将uploadify这个这jQuery插件,看懂并且成功使用,然后,便想做一个图片预览和剪切保存的小应用,因为使用uploadify很容易的将图片文件上传并且显示在前台页面,下一步便是寻找可以剪切和缩放图片的插件;网上一搜,我便看上了imgareaselect这个插件,便一门心思的去搞了;现在看来,确实能力有限,足足搞了两天,最终各种功能都实现了,可是重大缺憾,剪切的图片属性不是想要(所选的)的区域,这个问题足足花了一天时间也没有解决,只知道是向后台传递的参数不对,我试了各种参数,也不像网上或者官网上说的那样,要一个x,y,weight,height,便可以了,虽然失败了,……好在我有一份已经实现此功能的代码,只不过这个事例用的Jcrop这个插件,我有不得不了解这个插件,看了半天,与imgareaselect大同小异,没有办法,在Jcrop中传递同样的参数就可以实现所有的功能,这一点是在令我头痛!

一、准备:

  这个实例,不但用到了Jcrop这个插件还涉及到了json2这个文件;所以,你必须准备好所需的JS文件,与前一篇文章详解,依然使用上一篇的代码,文件上传已经成功,接着将传来的图片,进行选择,剪切,缩放和保存!

见图所需的文件以及项目目录:

152525679.jpg

项目架构好之后,便开始使用这个插件了使用uploadify的插件就不在重复了。

二、Jcrop插件的引入与uploadify相似,只需要一个有id属性的《img》标签;下面为index.jsp页面,注意JS的引入:

<%@ page language="java" import="java.util.*" pageEncoding="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">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
                                                                                                                                                                                                                          
  <link rel="stylesheet" href="css/default.css" type="text/css"></link>
  <link rel="stylesheet" href="css/uploadify.css" type="text/css"></link>
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"></link>
                                                                                                                                                                                                                        
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
  <script type="text/javascript" src="js/swfobject.js"></script>
  <script type="text/javascript" src="js/fileupload.js"></script>
  <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
  <script type="text/javascript" src="js/jQuery.UtrialAvatarCutter.js"></script>
                                                                                                                                                                                                                          
  </head>
  <body>
  <div> </div>
   <div style="font-size: 15px;">
   图片文件:&nbsp&nbsp&nbsp
  <input type="file" name="file" id="file" /></div>
  <input type="button" id="uploadFile" value="上传文件">
  <input type="button" id="cancelUpload" value="取消上传">
  <div id="fileList" style="height:51px;"></div>
                                                                                                                                                                                                                                
                                                                                                                                                                                                                         
                                                                                                                                                                                                                         
   <div><h2>图片预览:</h2></div>
  <table>
  <tr>
    <td><img id="userimg"  width="500" height="500"/></td>
    <td><div style="width: 120px; height: 120px; overflow: hidden; margin-left: 5px;" >
    <img id="preview" />
    </div></td>
  </tr>
  <tr>
    <td>
  <input type="hidden" id="x" />
  <input type="hidden" id="y" />
  <input type="hidden" id="w" />
  <input type="hidden" id="h" />
  <input type="button" id="submit" value="保存图片" />
    </td>
  </tr>
  </table>
  </body>
</html>



   在JSP页面中写入JS代码不是有好,便将需要的JS写在fileup.js和jQuery.UtrialAvatarCutter.js文件之中;源码就不在这里粘贴了,实际,只要你将JS成功引入之后(能共选择区域),便距离成功不远了,然后你需要的便是到官网查看文档,对你想要进行的操作寻找方法和参数!

  好了,这个令我头痛的实例,不说了,有已经实现的实现源码了,对了,只能在火狐浏览器中运行,本人耐心实在没有,不想去深究为何,感兴趣的下载源码后修改,谁有更好的实现源码,希望留言分享!这个小实例到此为止!

本文出自 “SeaSky” 博客,转载请与作者联系!

你可能感兴趣的:(java)