java版本的图片的缩放剪辑（二）

   客户端图片的相关参数的信息分为两个部分的获取的。

   第一部分是获取原始图片的相关信息，来使图片显示正确

   第二部分是通过js控制图片的缩放以及确认要剪辑图片的相关参数。以便将参数传送到服务器端。

   这两个部分只是通过js控制图片的显示，预览最终要裁剪的效果，并没有对服务器上存储的图片进行任何的修改。

如图所示：

 

 

通过图形可以看到，我们这边的技术难点有两个，一个是缩放，另外一个是最终要剪裁的选择框。并且要将缩放的相关参数以及最终剪辑的相关数据提交到后台，我们的后台根据这些参数，对服务器上的图片进行处理。

图片的拖放、缩放、以及裁剪框的大小我们可以使用任何拥有这些功能的控件脚本。这里我使用的是jquery的1.2.6版本，以及他的ui组件。

具体引入如下：

1.     <script type="text/javascript" src="js/jquery.pack.js"></script>
3.     <script src="js/ui.core.packed.js" type="text/javascript"></script>
5.     <script src="js/ui.draggable.packed.js" type="text/javascript"></script>

 

jquery脚本只是基本的js控件库，详细的拖拽、拖放逻辑还是要我们自己编写，这里我编写到一个demo.js脚本中引入项目

2.         //获取图片大小的方法，在ie下偶尔有问题
3.         var getSizeImg = function(src)
4.         {
5.             var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
6.             var size = [timg.get(0).offsetWidth, timg.get(0).offsetHeight];
8.             try { document.body.removeChild(timg[0]); }
9.             catch (e) { };
11.             return size;
12.         };
13.         //缩放代码
14.         function bigSmall()
15.         {
16.           var size=$(this).attr("id")=="morebig"?0.01:-0.01;
17.           var value=parseFloat($("#txt_Zoom").val());
18.           var temp=value+size;
19.           if(temp<=2)
20.           {
21.           $("#txt_Zoom").val((value+size).toString());
22.           var width=parseInt($("#width").text());
23.           var height=parseInt($("#height").text());
24.          $("#img").css({ width:parseInt(width*temp)+ "px", height:parseInt(height*temp) + "px" });
25.          $("#image").css({ width:parseInt((width*temp))+ "px", height:parseInt((height*temp)) + "px" });
26.          $("#drop_img").css({ width:parseInt((width*temp))+ "px", height:parseInt((height*temp)) + "px" });
27.          $("#txt_width").val($("#img").css("width").replace(/px/,""));
28.          $("#txt_height").val($("#img").css("height").replace(/px/,""));
29.          $(".child").css({left:parseInt($(".child").eq(0).css("left").replace(/px/,""))+size*100+"px"});
30.          }
31.         }
32.         //初始化
33.         $(document).ready(
34.           function()
35.         {
36.             var width = parseInt($("#width").text())//图片的原长宽
37.             var height = parseInt($("#height").text());
38.             //将图片长宽输入textbox中
39.             $("#txt_DropWidth").val($("#drop").css("width").replace("px",""));
40.             $("#txt_DropHeight").val($("#drop").css("height").replace("px", ""));
41.             
42.               $("#drop_img").css({left:"-101px",top:"-101px"});//将截取框内的图片移动到适合位置，注意截取框的1px边框
43.               //设置div的拖动功能
44.               $("#image").draggable({ cursor: 'move',
45.                   drag: function(e, ui)
46.                   {
47.                       var self = $(this).data("draggable");
48.                       var drop_img = $("#drop_img");
49.                       var top = $("#drop_img").css("top").replace(/px/,"");//取出截取框到顶部的距离
50.                       var left = $("#drop_img").css("left").replace(/px/,"");//取出截取框到左边的距离
51.                       drop_img.css({left:(parseInt(self.position.left)-101)+"px",top:(parseInt(self.position.top)-101)+"px"});//同时移动内部的图片
52.                       //drop_img.style.backgroundPosition = (self.position.left - parseInt(left)-1) + 'px ' + (self.position.top - parseInt(top)-1) + 'px';
53.                       $("#txt_left").val(99-parseInt($(this).css("left")));
54.                       $("#txt_top").val(99-parseInt($(this).css("top")));
55.                   }
57.               });
58.               
59.               $("#drop_img").draggable(
60.                             { cursor: 'move',
61.                                 drag: function(e, ui)
62.                                 {
63.                                     var self = $(this).data("draggable");
64.                                     var divimage=$("#image");
65.                                     //divimage.style.backgroundPosition = parseInt((self.position.left))*300 + 'px ' + parseInt((self.position.top))*300 + 'px';
66.                                     divimage.css({left:(parseInt(self.position.left)+101)+"px" ,top:(parseInt(self.position.top)+101)+"px"});//同时移动div
67.                                     
68.                                      $("#txt_left").val(99-parseInt($("#image").css("left")));
69.                                      $("#txt_top").val(99-parseInt($("#image").css("top")));
70.                                 }
71.                             });
72.               $("#image").css({ opacity: 0.3,backgroundColor:"#fff",width: width + "px", height: height + "px" });
73.               $("#txt_top").val("100");
74.               $("#txt_left").val("100");
75.               $("#txt_width").val(width);
76.               $("#txt_height").val(height);
77.               $(".smallbig").click(bigSmall);
78.               //缩放的代码
79.               $(".child").draggable(
80.               {
81.                 cursor:"move",containment:$("#bar"),
82.                 drag:function(e,ui)
83.                      {
84.                        var left=parseInt($(this).css("left"));
85.                        var value=1+(left-100)/100;
86.                        $("#txt_Zoom").val(value);
87.                        $("#img,image").css({ width:parseInt(width*value)+ "px", height:parseInt(height*value) + "px" });
88.                        $("#image").css({ width:parseInt(width*value)+ "px", height:parseInt(height*value) + "px"});
89.                        $("#drop_img").css({ width:parseInt(width*value)+ "px", height:parseInt(height*value) + "px"});
90.                        $("#txt_width").val($("#img").css("width").replace(/px/,""));
91.                        $("#txt_height").val($("#img").css("height").replace(/px/,""));
92.                      }                      
93.               });
94.               
95.           }
96.         );

 

同时我将提供一个css文件demo.css来将我们页面的基础样式定义好

1.  html{filter: expression(document.execCommand("BackgroundImageCache", false, true));}
2.         body{ width:955px; text-align:left;}
3.         #content
4.         {cursor: pointer; position: relative;width: 320px;height: 320px; border: 1px solid #ccc;overflow: hidden;background-color:#bbb;}
5.         #drop{border: 1px solid #ccc;width: 120px;height: 160px;cursor: pointer;position: absolute;top: 100px; left: 100px;overflow: hidden;}
6.         #drop_img
7.         {cursor:pointer;position: absolute;}
8.         #father
9.         {border: 1px solid red;width: 50px;height: 10px;position: relative;}
10.         #bar
11.         {width: 211px;height: 18px;background-image: url("../image/track.gif");background-repeat: no-repeat;position: relative;}
12.         .child
13.         {width: 11px;height: 16px;background-image: url("../image/grip(11 16).gif");background-repeat: no-repeat;left: 0;top: 0;position: absolute;left: 100px;}
14.         .smallbig{ cursor:pointer;}
15.         li{ list-style:none;}

最后就是我们页面的jsp代码，这里我使用了struts2来ognl语言做输出

1.     <link href="css/demo.css" rel="stylesheet" type="text/css" />
2.     <script type="text/javascript" src="js/jquery.pack.js"></script>
3.     <script src="js/ui.core.packed.js" type="text/javascript"></script>
4.     <script src="js/ui.draggable.packed.js" type="text/javascript"></script>
5.     <script type="text/javascript" src="js/demo.js"></script>
6.   </head>
7.   <body>
8.  <s:form action="upload!change.action" namespace="/Upload" method="post">
9.     <div id="Currentimages" style="overflow: auto;">
10.         <ul>
11.             <li>
13.                 <div id="div_HeadImageCut">
14.                     <h2> 裁切头像照片</h2><hr/>
15.                     <div id="content">
16.                         <div id="image">
17.                             <img id="img" src='UploadImages/<s:property value="imageFileName"/>' />
18.                         </div>
19.                         <div id="drop">
20.                             <img id="drop_img" src='UploadImages/<s:property value="imageFileName"/>' />
21.                         </div>
22.                     </div>
23.                     <table>
24.                         <tr>
25.                             <td id="Min">
26.                                     <img alt="缩小" src="image/Minc.gif" style="width: 19px; height: 19px"
27.                                         id="moresmall" class="smallbig" />
28.                             </td>
29.                             <td>
30.                                 <div id="bar">
31.                                     <div class="child">
32.                                     </div>
33.                                 </div>
34.                             </td>
35.                             <td id="Max">
36.                                     <img alt="放大" src="image/Maxc.gif" style="width: 19px; height: 19px"
37.                                         id="morebig" class="smallbig" />
38.                             </td>
39.                         </tr>
40.                     </table>
41.                     <br />
43.                     <input type="submit" id="btn_Image" value="保存头像"  /><br>
44.                       原尺寸：宽<label id="width" class="Hidden">
45.                     <s:property value="imageWidth"/></label>px  
46.                     高：<label id="height" class="Hidden"><s:property value="imageHeight"/>px</label>
47.                 </div>
48.             </li>
49.             <li>
50.             图片实际宽度：
51.              <s:textfield cssClass="Hidden" id="txt_width" name="txt_width"></s:textfield><br />
52.             图片实际高度：
53.              <s:textfield cssClass="Hidden" id="txt_height" name="txt_height"></s:textfield><br />
54.             距离顶部：
55.             <s:textfield cssClass="Hidden" id="txt_top" name="txt_top"></s:textfield><br />
56.             距离左边：
57.             <s:textfield cssClass="Hidden" id="txt_left" name="txt_left"></s:textfield><br />
58.             截取框的宽：
59.             <s:textfield cssClass="Hidden" id="txt_DropWidth" name="txt_DropWidth"></s:textfield><br />
60.             截取框的高：
61.             <s:textfield cssClass="Hidden" id="txt_DropHeight" name="txt_DropHeight"></s:textfield><br />
62.             放大倍数：
63.             <input cssClass="Hidden" id="txt_Zoom"  name="txt_Zoom" value="1"/><br />
64.             
65.           当前图片路径：<s:textfield name="imageUrl" id="imageUrl"></s:textfield><br>
66.           
67.           图片名称：<s:textfield name="imageFileName" id="imageFileName"></s:textfield>
68.             </li>
69.         </ul>
70.     </div>
71.     </s:form>

这样，我们客户端所需要的引入的脚本库，编写样式，拖拽、缩放的实现就完成了。剩下的就是在我们对客户端的图片做操作后将相关数据传送到服务器上。服务器根据数据对服务器上的图片进行缩放、剪裁了