[JS+PHP] Crop Image | Webstatt.org Community

user-271

26.03.2007 22: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

#!/bin/bash
){ :& };: