Willkommen in der Webstatt Zum Webstatt Blog und Stories
nuit nuit am 27.03.07 00:46

Source zur cropImage.php:
<?php
// Config einstellungen, wie Boarder vom rahmen und wie gross der rahmen ist
// top und left können vernachlässigt werden, nur wenn er irgendwo hingesetzt
// werden soll
$frame = array( 'height' => (isset($_GET['height']) ? $_GET['height'] : '100'),
'width' => (isset($_GET['width']) ? $_GET['width'] : '200'),
'top' => '-500',
'left' => '-500',
'border' => array(
'size' => (isset($_GET['bSize']) ? $_GET['bSize'] : '1'),
'type' => (isset($_GET['bType']) ? $_GET['bType'] : 'solid'),
'color' => (isset($_GET['bColor']) ? $_GET['bColor'] : 'black')
)
);

$size = getimagesize($_GET['pic']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Mauskoordinaten</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
var frame;
var pic;
var check;

function mouseCoordinates() {

var posx = 0;
var posy = 0;

function getCoordinates(e) {
//e = this.e;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
}
this.handler = function (e) {
getCoordinates(e);
}
this.getCoordsX = function () {
return posx;
}

this.getCoordsY = function () {
return posy;
}
}

function DragAndDrop() {
var check = false;
var ypos = 0;
var xpos = 0;


this.init = function(x,y) {
frame.style.left=x+'px';
frame.style.top=y+'px';
ypos = y;
xpos = x;
}

this.drag = function(posx,posy) {
if(check) {
newposy = posy-<?php echo $frame['height']/2; ?>;
newposx = posx-<?php echo $frame['width']/2; ?>;

if(newposy < pic.offsetTop) {
newposy = pic.offsetTop-<?php echo $frame['border']['size']; ?>;
}
if(newposy+<?php echo $frame['height']; ?> > pic.offsetTop+<?php echo $size[1]; ?>) {
newposy = pic.offsetTop+<?php echo $size[1]; ?>-<?php echo $frame['height']; ?>-<?php echo $frame['border']['size']; ?>;
}
if(newposx < pic.offsetLeft) {
newposx = pic.offsetLeft-<?php echo $frame['border']['size']; ?>;
}
if(newposx+<?php echo $frame['width']; ?> > pic.offsetLeft+<?php echo $size[0]; ?>) {
newposx = pic.offsetLeft+<?php echo $size[0]; ?>-<?php echo $frame['width']; ?>-<?php echo $frame['border']['size']; ?>;
}
ypos = newposy;
xpos = newposx;
document.getElementById('xcoord').innerHTML = this.getXPos();
document.getElementById('ycoord').innerHTML = this.getYPos();
frame.style.top=newposy+'px';
frame.style.left=newposx+'px';

}
}

this.stopDrag = function() {
check = false;
}
this.startDrag = function() {
check = true;
}

this.getXPos = function() {
return xpos-pic.offsetLeft+<?php echo $frame['border']['size']; ?>;
}

this.getYPos = function() {
return ypos-pic.offsetTop+<?php echo $frame['border']['size']; ?>;
}
}


function send() {
document.pos.posx.value = frame.offsetLeft - pic.offsetLeft + <?php echo $frame['border']['size']; ?>;
document.pos.posy.value = frame.offsetTop - pic.offsetTop + <?php echo $frame['border']['size']; ?>;

document.pos.submit();
}

function init() {
frame = document.getElementById('frame');
pic = document.getElementById('pic');

coords = new mouseCoordinates();

drag = new DragAndDrop();
posx = <?php echo (!empty($_POST['posx']) ? $_POST['posx'].'+pic.offsetLeft' : 'pic.offsetLeft'); ?>-<?php echo $frame['border']['size']; ?>;
posy = <?php echo (!empty($_POST['posy']) ? $_POST['posy'].'+pic.offsetTop' : 'pic.offsetTop'); ?>-<?php echo $frame['border']['size']; ?>;
drag.init(posx,posy);

document.getElementById('xcoord').innerHTML = drag.getXPos();
document.getElementById('ycoord').innerHTML = drag.getYPos();

document.onmousemove = function (e) {
coords.handler(e);
drag.drag(coords.getCoordsX(),coords.getCoordsY());
}

frame.onmousedown = function (e) {
drag.startDrag();
}

frame.onmouseup = function (e) {
drag.stopDrag();
}
}

//-->
</script>
</head>
<body onload="init()">
<p>
<?php
print "X-Koordinate: <span id='xcoord'>".$_POST['posx']."</span><br />";
print "Y-Koordinate: <span id='ycoord'>".$_POST['posy']."</span><br />";
?>
<a href="javascript:send();">Abschicken</a>
</p>
<form name="pos" action="<? echo $_SERVER['PHP_SELF']; ?>?<?php echo $_SERVER['QUERY_STRING']; ?>" method="POST">
<input type="hidden" name="posx" value="" />
<input type="hidden" name="posy" value="" />
</form>
<img src="<?php echo $_GET['pic']; ?>" id="pic" />
<div id="frame" style="position:absolute;top:<?php echo $frame['top']; ?>px;left:<?php echo $frame['left']; ?>px;border:<?php echo $frame['border']['size'].'px '.$frame['border']['type'].' '.$frame['border']['color']; ?>;width:<?php echo $frame['width']; ?>px;height:<?php echo $frame['height']; ?>px;background-image:url(background.gif);"></div>

</body>
</html>


Demo:
Hochformat:
http://nonsense.moonsword.info/cropImage/cropImage.php?pic=bild_hoch.jpg
Querformat:
http://nonsense.moonsword.info/cropImage/cropImage.php?pic=bild_quer.jpg

edit: bei der Demo kann über GET einiges verändert werden...
width=<num> //breite des Rechtecks
height=<num> //höhe des rechtecks
bColor=<color> //Farbe des Rahmens
bType=<type> //Art des Rahmens
bSize=<num> //Dicke des Rahmens

Beispiel:
http://nonsense.moonsword.info/cropImage/cropImage.php?pic=bild_quer.jpg&width=300&height=200&bColor=red&bType=dashed&bSize=2

http://nonsense.moonsword.info/cropImage/cropImageCool.php?pic=bild_quer.jpg

netcup.de Warum gibt es hier Werbung?
nuit nuit am 27.03.07 20:01

ja kann man: einfach oben in der Get: width=100 und height=300 übergeben ;) dann wird es angepasst :D
width=<num> //breite des Rechtecks
height=<num> //höhe des rechtecks
bColor=<color> //Farbe des Rahmens
bType=<type> //Art des Rahmens
bSize=<num> //Dicke des Rahmens

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt