Div Resize + Drag'n drop
Hej,Jeg er i gang med at lave et script til online billederedigering, og har pt. blot lavet så det er muligt at trække et layer over billedet. Koordinaterne sendes herefter videre til min backend kode, der generere et nyt billede (dvs. pt. crop'es det kun).
Dvs. at jeg mangler funktionaliteter til at resize og drag'e mit "crop-layer" rundt på billedet.
Er der en enkelt, der kan hjælpe mig videre :-) Det er vigtigt, at det virker i de mest gængse browsere.
koden kommer her:
<html>
<head>
<meta http-equiv="imagetoolbar" content="false" />
<script type="text/javascript">
/* **************************************
* GLOBAL PROPERTIES: *
****************************************/
// definerer start og slut koordinatet i vinduets koordinatsystem:
var startPos = {x:0,y:0}
var endPos = {x:0,y:0}
var cropElmId = "cropDiv";
var cropActive = false;
// definerer afstanden fra billedets nulpunkt (billedets øverste venstre hjørne)
// til vinduets nulpunkt (0,0):
var fromleft = 0;
var fromtop = 0;
function startCrop(e,elmId)
{
e = (!e) ? event : e;
// start-koordinat for punktet (0,0) på billedet:
fromleft = document.getElementById( "billede" ).offsetLeft;
fromtop = document.getElementById( "billede" ).offsetTop;
// start-koordinat på crop:
startPos.x = endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
startPos.y = endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
// sæt flag:
cropActive = true;
placeCropElm();
}
function moveCrop(e,elmId)
{
if (cropActive)
{
e = (!e) ? event : e;
endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
placeCropElm();
writePosition(elmId) ; //opdater værdier
}
}
function placeCropElm()
{
cropElm = document.getElementById(cropElmId).style;
cropElm.left = Math.min( startPos.x, endPos.x)+"px";
cropElm.top = Math.min( startPos.y,endPos.y) +"px";
cropElm.width = Math.max( endPos.x-startPos.x, startPos.x-endPos.x)+"px";
cropElm.height = Math.max( endPos.y-startPos.y, startPos.y-endPos.y)+"px";
}
function endCrop(e, elmId)
{
cropActive = false;
// slut koordinat på crop:
endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
writePosition(elmId);
}
function writePosition(ID)
{
frm = document.form1;
frm.x1.value = Math.min(startPos.x,endPos.x) - fromleft;
frm.y1.value = Math.min(startPos.y,endPos.y) - fromtop;
frm.x2.value = Math.max(startPos.x,endPos.x) - fromleft;
frm.y2.value = Math.max(startPos.y,endPos.y) - fromtop;
}
function MakeRegion (regionObject, imageObject)
{
if ( ( regionObject == null ) || ( imageObject == null ) )
{
alert ('MakeRegion: argument "regionObject" OR "imageObject" not an object');
return;
}
if ( endPos.x < 0 )
endPos.x = 0;
if ( endPos.y < 0 )
endPos.y = 0;
var tooWide = ( (startPos.x + endPos.x) > imageObject.width );
var tooTall = ( (startPos.y + endPos.y) > imageObject.height );
window.status = "startPos.x= "+startPos.x + ", endPos.x= +" +endPos.x + ", imageObject.width="+imageObject.width;
// check if selection exceeds the aspect boundaries:
if ( ( aspectLock == true ) || ( alwaysKeepAspect == true ) )
{
if ( tooWide == true )
{
endPos.x = imageObject.width - startPos.x;
endPos.y = Math.round (endPos.x / aspectRatio);
tooTall = ( (startPos.y + endPos.y) > imageObject.height);
}
if ( tooTall == true )
{
endPos.y = imageObject.height - startPos.y;
endPos.x = Math.round ( endPos.y * aspectRatio );
tooWide = ( ( startPos.x + endPos.x ) > imageObject.width );
if ( tooWide == true )
{
endPos.x = imageObject.width - startPos.x;
endPos.y = Math.round ( endPos.x / aspectRatio );
}
}
}
else
{
if ( tooWide == true )
endPos.x = imageObject.width - startPos.x;
if ( tooTall == true )
endPos.y = imageObject.height - startPos.y;
}
}//()
</script>
</head>
<body>
<div id="cropDiv" style="border:1px solid #000000;
background-color:#333333;
filter:alpha(opacity=50);
position:absolute;"
onclick="if (cropActive) { endCrop(event,this.id); } else {startCrop(event,'billede');}"
onmousemove="moveCrop(event,'billede');">
</div>
<br />
<img src="pussycat_nicole2.jpg" id="billede" style="cursor:crosshair;" onclick="if (cropActive) {endCrop(event, this.id);} else {startCrop(event,this.id);}" onmousemove="moveCrop(event,this.id);">
<form name="form1">
x1: <input type="text" name="x1">
-
y1: <input type="text" name="y1">
<br>
x2: <input type="text" name="x2">
-
y2: <input type="text" name="y2">
<br />
</div>
</form>
</body>
</html>
