mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-19 06:23:12 +01:00
333 lines
13 KiB
HTML
333 lines
13 KiB
HTML
|
<html style="width:580px; height:550;">
|
||
|
|
<HEAD>
|
||
|
|
<TITLE> New Document </TITLE>
|
||
|
|
<META NAME="Generator" CONTENT="EditPlus">
|
||
|
|
<META NAME="Author" CONTENT="">
|
||
|
|
<META NAME="Keywords" CONTENT="">
|
||
|
|
<META NAME="Description" CONTENT="">
|
||
|
|
<link href="ImageEditor.css" rel="stylesheet" type="text/css">
|
||
|
|
<script language="JavaScript" type="text/JavaScript">
|
||
|
|
<!--
|
||
|
|
|
||
|
|
function MM_findObj(n, d) { //v4.01
|
||
|
|
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
|
||
|
|
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
|
||
|
|
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
|
||
|
|
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
|
||
|
|
if(!x && d.getElementById) x=d.getElementById(n); return x;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function pviiClassNew(obj, new_style) { //v2.6 by PVII
|
||
|
|
obj.className=new_style;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleMarker()
|
||
|
|
{
|
||
|
|
//alert("Toggle");
|
||
|
|
var marker = MM_findObj("markerImg");
|
||
|
|
|
||
|
|
//alert(marker.src);
|
||
|
|
if(marker != null && marker.src != null) {
|
||
|
|
//alert(marker.src);
|
||
|
|
if(marker.src.indexOf("t_black.gif")>0) {
|
||
|
|
marker.src = "t_white.gif";
|
||
|
|
}
|
||
|
|
else
|
||
|
|
marker.src = "t_black.gif";
|
||
|
|
//alert(marker.src);
|
||
|
|
editor.toggleMarker();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateMarker(mode)
|
||
|
|
{
|
||
|
|
if (mode == 'crop')
|
||
|
|
{
|
||
|
|
var t_cx = MM_findObj('cx');
|
||
|
|
var t_cy = MM_findObj('cy');
|
||
|
|
var t_cw = MM_findObj('cw');
|
||
|
|
var t_ch = MM_findObj('ch');
|
||
|
|
|
||
|
|
editor.setMarker(parseInt(t_cx.value), parseInt(t_cy.value), parseInt(t_cw.value), parseInt(t_ch.value));
|
||
|
|
}
|
||
|
|
else if(mode == 'scale') {
|
||
|
|
var s_sw = MM_findObj('sw');
|
||
|
|
var s_sh = MM_findObj('sh');
|
||
|
|
editor.setMarker(0, 0, parseInt(s_sw.value), parseInt(s_sh.value));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var current_action = null;
|
||
|
|
var actions = ['crop', 'scale', 'rotate', 'measure', 'save'];
|
||
|
|
function toggle(action)
|
||
|
|
{
|
||
|
|
if(action != current_action) {
|
||
|
|
var toolbar = MM_findObj('bar_'+action);
|
||
|
|
var icon = MM_findObj('icon_'+action);
|
||
|
|
var btn = MM_findObj('btn_'+action);
|
||
|
|
btn.className='iconsSel';
|
||
|
|
current_action = action;
|
||
|
|
toolbar.style.display = "block";
|
||
|
|
icon.style.display = "block";
|
||
|
|
|
||
|
|
for (var i in actions)
|
||
|
|
{
|
||
|
|
if(current_action != actions[i]) {
|
||
|
|
var tool = MM_findObj('bar_'+actions[i]);
|
||
|
|
tool.style.display = "none";
|
||
|
|
var icon = MM_findObj('icon_'+actions[i]);
|
||
|
|
icon.style.display = "none";
|
||
|
|
var btn = MM_findObj('btn_'+actions[i]);
|
||
|
|
btn.className = 'icons';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
editor.setMode(current_action);
|
||
|
|
}
|
||
|
|
//alert(action);
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeClass(obj,action)
|
||
|
|
{
|
||
|
|
if(action == current_action) {
|
||
|
|
obj.className = 'iconsSel';
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
obj.className = 'icons';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function rotatePreset(selection)
|
||
|
|
{
|
||
|
|
var value = selection.options[selection.selectedIndex].value;
|
||
|
|
|
||
|
|
if(value.length > 0 && parseInt(value) != 0) {
|
||
|
|
var ra = MM_findObj('ra');
|
||
|
|
ra.value = parseInt(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateFormat(selection)
|
||
|
|
{
|
||
|
|
var selected = selection.options[selection.selectedIndex].value;
|
||
|
|
|
||
|
|
var values = selected.split(",");
|
||
|
|
//alert(values.length);
|
||
|
|
if(values.length >1) {
|
||
|
|
updateSlider(parseInt(values[1]));
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var editImage = '';
|
||
|
|
|
||
|
|
if(location.href.indexOf('?')>0) {
|
||
|
|
var parameters = location.href.split('?');
|
||
|
|
editImage = parameters[1];
|
||
|
|
}
|
||
|
|
|
||
|
|
//-->
|
||
|
|
</script>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||
|
|
</HEAD>
|
||
|
|
|
||
|
|
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||
|
|
<table width="100%" height="100%" cellspacing="1" >
|
||
|
|
<tr bgcolor="#EEEEFF" height="40">
|
||
|
|
<td class="topBar" width="60" ><table width="100%" border="0" cellspacing="8" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td class="icons">
|
||
|
|
<div id="icon_crop" style="display:none">
|
||
|
|
<img src="crop.gif" width="20" height="20" border="0">
|
||
|
|
</div>
|
||
|
|
<div id="icon_scale" style="display:none">
|
||
|
|
<img src="scale.gif" width="20" height="20" border="0">
|
||
|
|
</div>
|
||
|
|
<div id="icon_rotate" style="display:none">
|
||
|
|
<img src="rotate.gif" width="20" height="20" border="0">
|
||
|
|
</div>
|
||
|
|
<div id="icon_measure" style="display:none">
|
||
|
|
<img src="ruler.gif" width="20" height="20" border="0">
|
||
|
|
</div>
|
||
|
|
<div id="icon_save" style="display:none">
|
||
|
|
<img src="save.gif" width="20" height="20" border="0">
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table></td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<!-- crop -->
|
||
|
|
<div id="bar_crop" style="display:none">
|
||
|
|
<table border="0" cellspacing="5" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td class="topBar">Start X:
|
||
|
|
<INPUT TYPE="text" id="cx" style="width:3em" NAME="cx" onChange="updateMarker('crop')">
|
||
|
|
Start Y:
|
||
|
|
<INPUT TYPE="text" id="cy" style="width:3em" NAME="cy" onChange="updateMarker('crop')">
|
||
|
|
Width:
|
||
|
|
<INPUT TYPE="text" id="cw" style="width:3em" NAME="cw" onChange="updateMarker('crop')">
|
||
|
|
Height:
|
||
|
|
<INPUT TYPE="text" id="ch" style="width:3em" NAME="ch" onChange="updateMarker('crop')"> </td>
|
||
|
|
<td><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('crop');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- //crop -->
|
||
|
|
<!-- measure -->
|
||
|
|
<div id="bar_measure" style="display:none">
|
||
|
|
<table border="0" cellspacing="5" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td class="topBar">X:
|
||
|
|
<span id="sx" class="measureStats"></span>
|
||
|
|
Y:
|
||
|
|
<span id="sy" class="measureStats"></span></td>
|
||
|
|
<td class="topBar"><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="topBar"> W:
|
||
|
|
<span id="mw" class="measureStats"></span>
|
||
|
|
H:
|
||
|
|
<span id="mh" class="measureStats"></span>
|
||
|
|
</td>
|
||
|
|
<td><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="topBar">A:
|
||
|
|
<span id="ma" class="measureStats"></span>
|
||
|
|
D: <span id="md" class="measureStats"></span>
|
||
|
|
</td>
|
||
|
|
<td class="icons"><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="icons"><input type="button" name="Button" value="Clear" onClick="editor.reset()"></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- //measure -->
|
||
|
|
<!-- scale -->
|
||
|
|
<div id="bar_scale" style="display:none">
|
||
|
|
<table border="0" cellspacing="5" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td class="topBar">Width:
|
||
|
|
<input type="text" id="sw" style="width:3em" name="sw" onChange="updateMarker('scale')">
|
||
|
|
</td>
|
||
|
|
<td class="topBar"><img src="locked.gif" width="8" height="14"></td>
|
||
|
|
<td class="topBar"> Height:
|
||
|
|
<INPUT TYPE="text" id="sh" style="width:3em" NAME="sh" onChange="updateMarker('scale')">
|
||
|
|
</td>
|
||
|
|
<td><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('scale');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- //scale -->
|
||
|
|
<!-- rotate -->
|
||
|
|
<div id="bar_rotate" style="display:none">
|
||
|
|
<table border="0" cellspacing="5" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td width="115" class="topBar"><select id="flip" name="flip">
|
||
|
|
<option selected>Flip Image</option>
|
||
|
|
<option>-----------------</option>
|
||
|
|
<option value="hoz">Flip Horizontal</option>
|
||
|
|
<option value="ver">Flip Virtical</option>
|
||
|
|
</select></td>
|
||
|
|
<td width="115" class="topBar"><select name="rotate" onChange="rotatePreset(this)">
|
||
|
|
<option selected>Rotate Image</option>
|
||
|
|
<option>-----------------</option>
|
||
|
|
<option value="180">Rotate 180 °</option>
|
||
|
|
<option value="90">Rotate 90 ° CW</option>
|
||
|
|
<option value="-90">Rotate 90 ° CCW</option>
|
||
|
|
</select></td>
|
||
|
|
<td width="87" class="topBar"> Angle:
|
||
|
|
<INPUT TYPE="text" id="ra" style="width:3em" NAME="ra" onChange="updateMarker('rotate')">
|
||
|
|
</td>
|
||
|
|
<td width="2"><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
<td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('rotate');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- //rotate -->
|
||
|
|
<!-- save -->
|
||
|
|
<div id="bar_save" style="display:none">
|
||
|
|
<table border="0" cellspacing="5" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<td class="topBar">Filename:
|
||
|
|
<input type="filename" id="save_filename" value="padpc_1.jpg" name="textfield"></td>
|
||
|
|
<td class="topBar"> <select name="format" id="save_format" onChange="updateFormat(this)">
|
||
|
|
<option selected>Image Format</option>
|
||
|
|
<option>---------------------</option>
|
||
|
|
<option value="jpeg,85">JPEG High</option>
|
||
|
|
<option value="jpeg,60">JPEG Medium</option>
|
||
|
|
<option value="jpeg,35">JPEG Low</option>
|
||
|
|
<option value="png">PNG</option>
|
||
|
|
<option value="gif">GIF</option>
|
||
|
|
</select></td>
|
||
|
|
<td class="topBar">Quality:
|
||
|
|
</td>
|
||
|
|
<td width="120">
|
||
|
|
<div id="slidercasing">
|
||
|
|
<div id="slidertrack" style="width:100px"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div>
|
||
|
|
<div id="sliderbar" style="left:50px" onmousedown="captureStart()"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div></div>
|
||
|
|
</td>
|
||
|
|
<td class="topBar">
|
||
|
|
<INPUT TYPE="text" id="quality" NAME="quality" onChange="updateSlider(this.value)" style="width:2em">
|
||
|
|
<script type="text/javascript" src="jscripts/slider.js"></script>
|
||
|
|
<script language="JavaScript1.2">
|
||
|
|
<!--
|
||
|
|
|
||
|
|
updateSlider(85);
|
||
|
|
|
||
|
|
//-->
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</td>
|
||
|
|
<td><img src="div.gif" width="2" height="30"></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
<td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('save');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!--//save -->
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
|
||
|
|
<td bgcolor="#EEEEFF" width="60" valign="top" align="center" nowrap><table width="100%" border="0" cellspacing="8" cellpadding="2">
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Crop</a> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Resize</a> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Rotate</a> </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Measure</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Marker</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<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" width="20" height="20" border="0"><br>
|
||
|
|
Save</a> </td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
<td width="99%" >
|
||
|
|
<iframe width="100%" height="100%" id="editor" name="editor" src="load_image.php" marginwidth="0" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0" background="gray">
|
||
|
|
</iframe>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|