客户端图片的相关参数的信息分为两个部分的获取的。
第一部分是获取原始图片的相关信息，来使图片显示正确
第二部分是通过js控制图片的缩放以及确认要剪辑图片的相关参数。以便将参数传送到服务器端。
这两个部分只是通过js控制图片的显示，预览最终要裁剪的效果，并没有对服务器上存储的图片进行任何的修改。
如图所示：
通过图形可以看到，我们这边的技术难点有两个，一个是缩放，另外一个是最终要剪裁的选择框。并且要将缩放的相关参数以及最终剪辑的相关数据提交到后台，我们的后台根据这些参数，对服务器上的图片进行处理。
图片的拖放、缩放、以及裁剪框的大小我们可以使用任何拥有这些功能的控件脚本。这里我使用的是jquery的1.2.6版本，以及他的ui组件。
具体引入如下：
1. "text/javascript" src="js/jquery.pack.js"></script>
2.
3. "js/ui.core.packed.js" type="text/javascript"></script>
4.
5. "js/ui.draggable.packed.js" type="text/javascript"></script>
jquery脚本只是基本的js控件库，详细的拖拽、拖放逻辑还是要我们自己编写，这里我编写到一个demo.js脚本中引入项目
1.
2. //获取图片大小的方法，在ie下偶尔有问题
3. var getSizeImg = function(src)
4. {
5. '<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
6. get(0).offsetWidth, timg.get(0).offsetHeight];
7.
8. try
9. catch
10.
11. return
12. };
13. //缩放代码
14. function bigSmall()
15. {
16. this).attr("id")=="morebig"?0.01:-0.01;
17. "#txt_Zoom").val());
18. var temp=value+size;
19. if(temp<=2)
20. {
21. "#txt_Zoom").val((value+size).toString());
22. "#width").text());
23. "#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. "#width").text())//图片的原长宽
37. "#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. this).data("draggable");
48. "#drop_img");
49. "#drop_img").css("top").replace(/px/,"");//取出截取框到顶部的距离
50. "#drop_img").css("left").replace(/px/,"");//取出截取框到左边的距离
51. "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. }
56.
57. });
58.
59. "#drop_img").draggable(
60. 'move',
61. drag: function(e, ui)
62. {
63. this).data("draggable");
64. "#image");
65. //divimage.style.backgroundPosition = parseInt((self.position.left))*300 + 'px ' + parseInt((self.position.top))*300 + 'px';
66. "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. "move",containment:$("#bar"),
82. drag:function(e,ui)
83. {
84. 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. "BackgroundImageCache", false, true));}
2.
3. #content
4.
5. #drop{border: 1px solid #ccc;width: 120px;height: 160px;cursor: pointer;position: absolute;top: 100px; left: 100px;overflow: hidden;}
6. #drop_img
7.
8. #father
9.
10. #bar
11. "../image/track.gif");background-repeat: no-repeat;position: relative;}
12. .child
13. "../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. "css/demo.css" rel="stylesheet" type="text/css"
2. "text/javascript" src="js/jquery.pack.js"></script>
3. "js/ui.core.packed.js" type="text/javascript"></script>
4. "js/ui.draggable.packed.js" type="text/javascript"></script>
5. "text/javascript" src="js/demo.js"></script>
6. </head>
7. <body>
8. "upload!change.action" namespace="/Upload" method="post">
9. "Currentimages" style="overflow: auto;">
10. <ul>
11. <li>
12.
13. "div_HeadImageCut">
14. <h2> 裁切头像照片</h2><hr/>
15. "content">
16. "image">
17. "img" src='UploadImages/<s:property value="imageFileName"/>'
18. </div>
19. "drop">
20. "drop_img" src='UploadImages/<s:property value="imageFileName"/>'
21. </div>
22. </div>
23. <table>
24. <tr>
25. "Min">
26. "缩小" src="image/Minc.gif" style="width: 19px; height: 19px"
27. "moresmall" class="smallbig"
28. </td>
29. <td>
30. "bar">
31. class="child">
32. </div>
33. </div>
34. </td>
35. "Max">
36. "放大" src="image/Maxc.gif" style="width: 19px; height: 19px"
37. "morebig" class="smallbig"
38. </td>
39. </tr>
40. </table>
41. <br />
42.
43. "submit" id="btn_Image" value="保存头像"
44. "width" class="Hidden">
45. "imageWidth"/></label>px
46. "height" class="Hidden"><s:property value="imageHeight"/>px</label>
47. </div>
48. </li>
49. <li>
50. 图片实际宽度：
51. "Hidden" id="txt_width" name="txt_width"></s:textfield><br />
52. 图片实际高度：
53. "Hidden" id="txt_height" name="txt_height"></s:textfield><br />
54. 距离顶部：
55. "Hidden" id="txt_top" name="txt_top"></s:textfield><br />
56. 距离左边：
57. "Hidden" id="txt_left" name="txt_left"></s:textfield><br />
58. 截取框的宽：
59. "Hidden" id="txt_DropWidth" name="txt_DropWidth"></s:textfield><br />
60. 截取框的高：
61. "Hidden" id="txt_DropHeight" name="txt_DropHeight"></s:textfield><br />
62. 放大倍数：
63. "Hidden" id="txt_Zoom" name="txt_Zoom" value="1"/><br />
64.
65. "imageUrl" id="imageUrl"></s:textfield><br>
66.
67. "imageFileName" id="imageFileName"></s:textfield>
68. </li>
69. </ul>
70. </div>
71. </s:form>这样，我们客户端所需要的引入的脚本库，编写样式，拖拽、缩放的实现就完成了。剩下的就是在我们对客户端的图片做操作后将相关数据传送到服务器上。服务器根据数据对服务器上的图片进行缩放、剪裁了
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
