| [ Index ] |
|
Code source de eGroupWare 1.2.106-2 |
1 <? 2 /*********************************************************************** 3 ** Title.........: Online Image Editor 4 ** Version.......: 1.0 5 ** Author........: Xiang Wei ZHUO <wei@zhuo.org> 6 ** Filename......: ImageEditor.php 7 ** Last changed..: 31 Aug 2003 8 ** Notes.........: Configuration in config.inc.php 9 **/ 10 $image = ''; 11 12 if(isset($_GET['img'])) 13 { 14 $image = $_GET['img']; 15 $path_info = pathinfo(urldecode($image)); 16 } 17 ?> 18 <html style="width:700px; height:550;"> 19 <HEAD> 20 <TITLE> Editing: <? echo $path_info['basename']; ?></TITLE> 21 <script type="text/javascript" src="../popup.js"></script> 22 <script type="text/javascript" src="../../dialog.js"></script> 23 <link href="ImageEditor.css" rel="stylesheet" type="text/css"> 24 <script language="JavaScript" type="text/JavaScript"> 25 <!-- 26 27 function MM_findObj(n, d) { //v4.01 28 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 29 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 30 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 31 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 32 if(!x && d.getElementById) x=d.getElementById(n); return x; 33 } 34 35 36 function pviiClassNew(obj, new_style) { //v2.6 by PVII 37 obj.className=new_style; 38 } 39 40 function toggleMarker() 41 { 42 //alert("Toggle"); 43 var marker = MM_findObj("markerImg"); 44 45 //alert(marker.src); 46 if(marker != null && marker.src != null) { 47 //alert(marker.src); 48 if(marker.src.indexOf("t_black.gif")>0) { 49 marker.src = "t_white.gif"; 50 } 51 else 52 marker.src = "t_black.gif"; 53 //alert(marker.src); 54 editor.toggleMarker(); 55 } 56 } 57 58 function updateMarker(mode) 59 { 60 if (mode == 'crop') 61 { 62 var t_cx = MM_findObj('cx'); 63 var t_cy = MM_findObj('cy'); 64 var t_cw = MM_findObj('cw'); 65 var t_ch = MM_findObj('ch'); 66 67 editor.setMarker(parseInt(t_cx.value), parseInt(t_cy.value), parseInt(t_cw.value), parseInt(t_ch.value)); 68 } 69 else if(mode == 'scale') { 70 var s_sw = MM_findObj('sw'); 71 var s_sh = MM_findObj('sh'); 72 editor.setMarker(0, 0, parseInt(s_sw.value), parseInt(s_sh.value)); 73 } 74 } 75 76 77 var current_action = null; 78 var actions = ['crop', 'scale', 'rotate', 'measure', 'save']; 79 function toggle(action) 80 { 81 if(action != current_action) { 82 var toolbar = MM_findObj('bar_'+action); 83 var icon = MM_findObj('icon_'+action); 84 var btn = MM_findObj('btn_'+action); 85 btn.className='iconsSel'; 86 current_action = action; 87 toolbar.style.display = "block"; 88 icon.style.display = "block"; 89 90 for (var i in actions) 91 { 92 if(current_action != actions[i]) { 93 var tool = MM_findObj('bar_'+actions[i]); 94 tool.style.display = "none"; 95 var icon = MM_findObj('icon_'+actions[i]); 96 icon.style.display = "none"; 97 var btn = MM_findObj('btn_'+actions[i]); 98 btn.className = 'icons'; 99 } 100 } 101 102 editor.setMode(current_action); 103 } 104 //alert(action); 105 } 106 107 function changeClass(obj,action) 108 { 109 if(action == current_action) { 110 obj.className = 'iconsSel'; 111 } 112 else 113 { 114 obj.className = 'icons'; 115 } 116 } 117 118 function rotatePreset(selection) 119 { 120 var value = selection.options[selection.selectedIndex].value; 121 122 if(value.length > 0 && parseInt(value) != 0) { 123 var ra = MM_findObj('ra'); 124 ra.value = parseInt(value); 125 } 126 } 127 128 function updateFormat(selection) 129 { 130 var selected = selection.options[selection.selectedIndex].value; 131 132 var values = selected.split(","); 133 //alert(values.length); 134 if(values.length >1) { 135 updateSlider(parseInt(values[1])); 136 } 137 138 } 139 140 function onCancel() { 141 __dlg_close(null); 142 return false; 143 }; 144 145 function onOK() 146 { 147 __dlg_close(null); 148 return false; 149 } 150 function Init() { 151 __dlg_init(); 152 } 153 154 //--> 155 </script> 156 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 157 </HEAD> 158 159 <BODY onLoad="Init();" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 160 <table width="100%" height="100%" cellspacing="1" > 161 <tr bgcolor="#EEEEFF" height="40"> 162 <td class="topBar" width="60" ><table width="100%" border="0" cellspacing="8" cellpadding="2"> 163 <tr> 164 <td class="icons"> 165 <div id="icon_crop" style="display:none"> 166 <img src="crop.gif" alt="Crop" width="20" height="20" border="0"> 167 </div> 168 <div id="icon_scale" style="display:none"> 169 <img src="scale.gif" alt="Resize" width="20" height="20" border="0"> 170 </div> 171 <div id="icon_rotate" style="display:none"> 172 <img src="rotate.gif" alt="Rotate" width="20" height="20" border="0"> 173 </div> 174 <div id="icon_measure" style="display:none"> 175 <img src="ruler.gif" alt="Measure" width="20" height="20" border="0"> 176 </div> 177 <div id="icon_save" style="display:none"> 178 <img src="save.gif" alt="Save" width="20" height="20" border="0"> 179 </div> 180 </td> 181 </tr> 182 </table></td> 183 184 <td> 185 <!-- crop --> 186 <div id="bar_crop" style="display:none"> 187 <table border="0" cellspacing="5" cellpadding="2"> 188 <tr> 189 <td class="topBar">Start X: 190 <INPUT TYPE="text" id="cx" style="width:3em" NAME="cx" onChange="updateMarker('crop')"> 191 Start Y: 192 <INPUT TYPE="text" id="cy" style="width:3em" NAME="cy" onChange="updateMarker('crop')"> 193 Width: 194 <INPUT TYPE="text" id="cw" style="width:3em" NAME="cw" onChange="updateMarker('crop')"> 195 Height: 196 <INPUT TYPE="text" id="ch" style="width:3em" NAME="ch" onChange="updateMarker('crop')"> </td> 197 <td><img src="div.gif" width="2" height="30"></td> 198 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" alt="Cancel" height="30" border="0"></a></td> 199 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('crop');"><img src="btn_ok.gif" alt="Apply" width="30" height="30" border="0"></a></td> 200 </tr> 201 </table> 202 </div> 203 <!-- //crop --> 204 <!-- measure --> 205 <div id="bar_measure" style="display:none"> 206 <table border="0" cellspacing="5" cellpadding="2"> 207 <tr> 208 <td class="topBar">X: 209 <span id="sx" class="measureStats"></span> 210 Y: 211 <span id="sy" class="measureStats"></span></td> 212 <td class="topBar"><img src="div.gif" width="2" height="30"></td> 213 <td class="topBar"> W: 214 <span id="mw" class="measureStats"></span> 215 H: 216 <span id="mh" class="measureStats"></span> 217 </td> 218 <td><img src="div.gif" width="2" height="30"></td> 219 <td class="topBar">A: 220 <span id="ma" class="measureStats"></span> 221 D: <span id="md" class="measureStats"></span> 222 </td> 223 <td class="icons"><img src="div.gif" width="2" height="30"></td> 224 <td class="icons"><input type="button" name="Button" value="Clear" onClick="editor.reset()"></td> 225 </tr> 226 </table> 227 </div> 228 <!-- //measure --> 229 <!-- scale --> 230 <div id="bar_scale" style="display:none"> 231 <table border="0" cellspacing="5" cellpadding="2"> 232 <tr> 233 <td class="topBar">Width: 234 <input type="text" id="sw" style="width:3em" name="sw" onChange="updateMarker('scale')"> 235 </td> 236 <td class="topBar"><img src="locked.gif" width="8" height="14"></td> 237 <td class="topBar"> Height: 238 <INPUT TYPE="text" id="sh" style="width:3em" NAME="sh" onChange="updateMarker('scale')"> 239 </td> 240 <td><img src="div.gif" width="2" height="30"></td> 241 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" alt="Cancel" width="30" height="30" border="0"></a></td> 242 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('scale');"><img src="btn_ok.gif" alt="Apply" width="30" height="30" border="0"></a></td> 243 </tr> 244 </table> 245 </div> 246 <!-- //scale --> 247 <!-- rotate --> 248 <div id="bar_rotate" style="display:none"> 249 <table border="0" cellspacing="5" cellpadding="2"> 250 <tr> 251 <td width="115" class="topBar"><select id="flip" name="flip"> 252 <option selected>Flip Image</option> 253 <option>-----------------</option> 254 <option value="hoz">Flip Horizontal</option> 255 <option value="ver">Flip Virtical</option> 256 </select></td> 257 <td width="115" class="topBar"><select name="rotate" onChange="rotatePreset(this)"> 258 <option selected>Rotate Image</option> 259 <option>-----------------</option> 260 <option value="180">Rotate 180 °</option> 261 <option value="90">Rotate 90 ° CW</option> 262 <option value="-90">Rotate 90 ° CCW</option> 263 </select></td> 264 <td width="87" class="topBar"> Angle: 265 <INPUT TYPE="text" id="ra" style="width:3em" NAME="ra" onChange="updateMarker('rotate')"> 266 </td> 267 <td width="2"><img src="div.gif" width="2" height="30"></td> 268 <td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" alt="Cancel" width="30" height="30" border="0"></a></td> 269 <td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('rotate');"><img src="btn_ok.gif" alt="Apply" width="30" height="30" border="0"></a></td> 270 </tr> 271 </table> 272 </div> 273 <!-- //rotate --> 274 <!-- save --> 275 <div id="bar_save" style="display:none"> 276 <table border="0" cellspacing="5" cellpadding="2"> 277 <tr> 278 <td class="topBar">Filename: 279 <input type="filename" id="save_filename" value="<? echo $path_info['basename']; ?>" name="textfield"></td> 280 <td class="topBar"> <select name="format" id="save_format" onChange="updateFormat(this)"> 281 <option value="" selected>Image Format</option> 282 <option value="">---------------------</option> 283 <option value="jpeg,85">JPEG High</option> 284 <option value="jpeg,60">JPEG Medium</option> 285 <option value="jpeg,35">JPEG Low</option> 286 <option value="png">PNG</option> 287 <option value="gif">GIF</option> 288 </select></td> 289 <td class="topBar">Quality: 290 </td> 291 <td width="120"> 292 <div id="slidercasing"> 293 <div id="slidertrack" style="width:100px"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div> 294 <div id="sliderbar" style="left:50px" onmousedown="captureStart()"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div></div> 295 </td> 296 <td class="topBar"> 297 <INPUT TYPE="text" id="quality" NAME="quality" onChange="updateSlider(this.value)" style="width:2em"> 298 <script type="text/javascript" src="jscripts/slider.js"></script> 299 <script language="JavaScript1.2"> 300 <!-- 301 302 updateSlider(85); 303 304 //--> 305 </script> 306 307 308 </td> 309 <td><img src="div.gif" width="2" height="30"></td> 310 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" alt="Cancel" width="30" height="30" border="0"></a></td> 311 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('save');"><img src="btn_ok.gif" alt="Apply" width="30" height="30" border="0"></a></td> 312 </tr> 313 </table> 314 </div> 315 <!--//save --> 316 </td> 317 </tr> 318 <tr> 319 320 <td bgcolor="#EEEEFF" width="60" valign="top" align="center" nowrap><table width="100%" border="0" cellspacing="8" cellpadding="2"> 321 <tr> 322 <td class="icons" id='btn_crop' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'crop')"><a href="#" class="iconText" onClick="javascript:toggle('crop')"><img src="crop.gif" alt="Crop" width="20" height="20" border="0"><br> 323 Crop</a> </td> 324 </tr> 325 <tr> 326 <td class="icons" id='btn_scale' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'scale')"><a href="#" class="iconText" onClick="javascript:toggle('scale')"><img src="scale.gif" alt="Resize" width="20" height="20" border="0"><br> 327 Resize</a> </td> 328 </tr> 329 <tr> 330 <td class="icons" id='btn_rotate' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'rotate')"><a href="#" class="iconText" onClick="javascript:toggle('rotate')"><img src="rotate.gif" alt="Rotate" width="20" height="20" border="0"><br> 331 Rotate</a> </td> 332 </tr> 333 <tr> 334 <td class="icons" id='btn_measure' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'measure')"><a href="#" class="iconText" onClick="javascript:toggle('measure')"><img src="ruler.gif" alt="Measure" width="20" height="20" border="0"><br> 335 Measure</a></td> 336 </tr> 337 <tr> 338 <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a class="iconText" href="#" onClick="toggleMarker();"><img src="t_black.gif" name="markerImg" id="markerImg" alt="Marker" width="20" height="20" border="0"><br> 339 Marker</a></td> 340 </tr> 341 <tr> 342 <td class="icons" id='btn_save' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'save')"><a href="#" class="iconText" onClick="javascript:toggle('save')"><img src="save.gif" alt="Save" width="20" height="20" border="0"><br> 343 Save</a> </td> 344 </tr> 345 </table> 346 </td> 347 <td width="99%" > 348 <iframe width="100%" height="100%" id="editor" name="editor" src="load_image.php?img=<? echo $image; ?>" marginwidth="0" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0" background="gray"> 349 </iframe> 350 </td> 351 </tr> 352 </table> 353 </BODY> 354 </HTML>
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Sun Feb 25 17:20:01 2007 | par Balluche grâce à PHPXref 0.7 |