ImageAreaSelect

  1 <%@page import="com.asiainfo.selfcare.common.SelfConstants"%>
  2 <%@ page contentType="text/html; charset=GBK"%>
  3 <%@ include file="/webframe/common/commonhead.jsp"%>
  4 <html>       
  5 <head>   
  6 <%
  7 String path = request.getContextPath();
  8 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  9 %>
 10 
 11 <link rel="stylesheet" type="text/css"  href="<%=path %>/selfcare/ckeditor/plugins/imgareaselect/css/imgareaselect-animated.css"/>
 12 <style rel="stylesheet"  type="text/css" >
 13 .area {
 14 background:none repeat scroll 0 0  #EEEEFF;
 15 border:2px solid #DDDDEE;
 16 padding:0.6em 0.6em 1em 0.6em;
 17 width:85%;
 18 display:block;
 19 margin-bottom:1em;
 20 }
 21 div.frame {
 22 background:none repeat scroll 0 0 #FFFFFF;
 23 border:2px solid #DDDDDD;
 24 padding:0.4em;
 25 }
 26 .info{color:green;}
 27 </style>
 28 
 29 <script type="text/javascript" src="<%=path %>/selfcare/ckeditor/plugins/imgareaselect/scripts/jquery.min.js"></script>
 30 <script type="text/javascript" src="<%=path %>/selfcare/ckeditor/plugins/imgareaselect/scripts/jquery.imgareaselect.min.js"></script> 
 31 <script type="text/javascript">
 32 $(function () { 
 33         var para = window.dialogArguments;
 34         document.getElementById("img5").src=para[0];
 35         //加载图片自适应窗口大小
 36         init();
 37          
 38         $("#img6").attr("src",para[0]);        
 39         var flag=para[1]; 
 40         if(flag == "1"){
 41             $("#preview").css({width:'94px',height:'84px'});
 42             var ias =$('img#img5').imgAreaSelect({ 
 43                 //设置框的添加效果  
 44                 fadeSpeed:200,  
 45                 //选择框选择完毕是否自己取消  
 46                 autoHide:false, 
 47                 //是否显示图片遮罩层  
 48                 show:true,  
 49                 handles: true,
 50                 instance: true, 
 51                 maxHeight: 84,
 52                 maxWidth:94, 
 53                 onSelectChange: preview1 ,
 54               //设置初始函数 画出选择框  
 55                onInit:function(img, selection){
 56                    ias.setSelection(0, 0, 94, 84, true);
 57                    ias.update();
 58                 },  
 59                 onSelectEnd:function(img, selection) {
 60                     $('#img5').data('x',selection.x1); 
 61                     $('#img5').data('y',selection.y1); 
 62                     $('#img5').data('w',selection.width); 
 63                     $('#img5').data('h',selection.height);
 64                 } 
 65             });
 66             //赋值给全局  
 67             this.ias = ias;
 68         }
 69         if(flag == "2"){
 70             $("#preview").css({width:'961px',height:'305px'}); 
 71             var ias =$('img#img5').imgAreaSelect({ 
 72                 //设置框的添加效果  
 73                 fadeSpeed:200,  
 74                 //选择框选择完毕是否自己取消  
 75                 autoHide:false, 
 76                 //是否显示图片遮罩层  
 77                 show:true,   
 78                 handles: true,
 79                 //是否采用api  
 80                 instance: true, 
 81                 maxHeight: 305, 
 82                 maxWidth:961,
 83                 onSelectChange: preview2 ,
 84               //设置初始函数 画出选择框  
 85                onInit:function(img, selection){
 86                        ias.setSelection(0, 0, 961, 305, true);
 87                        ias.update();
 88                 }, 
 89                 onSelectEnd:function(img, selection) {
 90                     $('#img5').data('x',selection.x1); 
 91                     $('#img5').data('y',selection.y1); 
 92                     $('#img5').data('w',selection.width); 
 93                     $('#img5').data('h',selection.height);
 94                 } 
 95             });
 96             //赋值给全局  
 97             this.ias = ias;
 98         }
 99 });
100 
101 
102 function preview1(img, selection) { 
103     var scaleX = 94 / (selection.width || 1); 
104     var scaleY = 84 / (selection.height || 1); 
105     $('#img6').css({ 
106         width: Math.round(scaleX * 94) + 'px', 
107         height: Math.round(scaleY * 84) + 'px', 
108         marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
109         marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
110     }); 
111 } 
112 
113 function preview2(img, selection) { 
114     var scaleX = 961 / (selection.width || 1); 
115     var scaleY = 305 / (selection.height || 1); 
116     $('#img6').css({ 
117         width: Math.round(scaleX * 961) + 'px', 
118         height: Math.round(scaleY * 305) + 'px', 
119         marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
120         marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
121     }); 
122 }
123 
124 //保存
125 function doSave(){
126     if(confirm("是否提交？")){
127          var x= $('#img5').data('x');
128            var y= $('#img5').data('y');
129            var w= $('#img5').data('w');
130            var h= $('#img5').data('h');
131            var pic=$('#img5').attr('src'); 
132            var url = _gModuleName+"/business/com.asiainfo.selfcare.cms.web.ImageUploadAction?action=imageScissor&x="+x+"&y="+y+"&w="+w+"&h="+h+"&pic="+pic;
133            PostInfotoServer(url,"");
134           window.close(); 
135     }
136 }  
137 function init(){ 
138     
139     if( document.body.scrollWidth > (window.screen.availWidth-100) ){ 
140         window.dialogWidth = (window.screen.availWidth-100).toString() + "px" 
141     }else{ 
142         window.dialogWidth = (document.body.scrollWidth +10).toString() + "px" 
143     }     
144     
145     if( document.body.scrollHeight > (window.screen.availHeight-70) ){ 
146         window.dialogHeight = (window.screen.availHeight-50).toString() + "px" 
147     }else{ 
148         window.dialogHeight = (document.body.scrollHeight +10).toString() + "px" 
149     }     
150 
151     window.dialogLeft = ((window.screen.availWidth - document.body.clientWidth) / 2).toString() + "px" ;
152     window.dialogTop = ((window.screen.availHeight - document.body.clientHeight) / 2).toString() + "px";
153 }
154   
155 </script>
156 </head>
157 <body  onload="init()">
158  
159 <div class="area">
160 
161     <div style="float: left; width: 50%;" >
162         <p style="font-size: 150%; font-weight: bold;padding-left: 0.1em;" class="instructions" ><i18n:message key="SLS5100268" res="CRM"/></p>
163         <div style="margin: 0pt 0.3em; position:relative;left:18px;" >
164             <img src="" id="img5" />
165         </div>
166     </div>
167 
168     <div style="clear:left;"></div>
169     
170     <div style="float: left; width: 50%; padding-top:50px;position:relative;left:10px;">
171         <p style="font-size: 150%; font-weight: bold; padding-left: 0.1em;" class="instructions"><i18n:message key="SLS5100269" res="CRM"/></p>
172         <div style="margin: 0pt 1em; "  >
173             <div style=" overflow: hidden;border:2px solid #DDDDEE" id="preview">
174                 <img style=" margin-left: -71px; margin-top: -54px;" id="img6"  src="" alt="null"/>
175             </div>
176         </div>
177     </div>
178 </div>
179 <div class="area_button"> 
180         <table style="margin-top: 1em;">
181                 
182                      <ai:button text="AMS0700259" i18nRes="CRM" id="sliceButton" onclick="doSave()"/>  
183                        <ai:button text="SLS0000020" i18nRes="CRM" id="btnClose" onclick="window.close()" />
184                   
185         </table>
186 </div>
187 </body>
188 </html>
posted on 2012-08-31 11:06 NeverGiveUp_ZONE 阅读(641) 评论(0) 编辑收藏举报