source: trunk/phpgwapi/js/htmlarea/plugins/UploadImage/popups/ImageEditor/ImageEditor.php @ 2

Revision 2, 14.4 KB checked in by niltonneto, 17 years ago (diff)

Removida todas as tags usadas pelo CVS ($Id, $Source).
Primeira versão no CVS externo.

  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
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
27function 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
36function pviiClassNew(obj, new_style) { //v2.6 by PVII
37  obj.className=new_style;
38}
39
40function 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
58function 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
77var current_action = null;
78var actions = ['crop', 'scale', 'rotate', 'measure', 'save'];
79function 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
107function changeClass(obj,action)
108{
109    if(action == current_action) {
110        obj.className = 'iconsSel';
111    }
112    else
113    {
114        obj.className = 'icons';
115    }
116}
117
118function 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
128function 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
140function onCancel() {
141  __dlg_close(null);
142  return false;
143};
144
145function onOK()
146{
147  __dlg_close(null);
148  return false;
149}
150function 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 &deg;</option>
261              <option value="90">Rotate 90 &deg; CW</option>
262              <option value="-90">Rotate 90 &deg; 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
302updateSlider(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>
Note: See TracBrowser for help on using the repository browser.