php + js bild mit farbverlauf generieren

afr0kalypse · 14.05.2009

hallo zusammen.

ich möchte mit hilfe von javascript und php ein bild erzeugen, dass einen einfachen farbverlauf darstellt.
das problem was sich mir dabei stellt ist, dass ich mit der php funktion imagepng()
ein bild erzeuge, welches auch meinen wünschen entspricht. dieses bild kann ich aber nicht in echtzeit farblich ändern, da ich seitens javascript nur den bild stream erhalte.

meine frage nun: wie kann ich ein bild mit php erzeugen und dieses dann an javascript weitergeben und dort darstellen?
anbei etwas code:

bild erzeugende farb.php:

PHP:

<?php
	error_reporting(E_ALL);
	header ("Content-type: image/png");

	//höhe und breite des bildes
	$w  = $_GET['w'];
	$h  = $_GET['h'];
	if(!isset($h) || $h == "")
	{
		$h = 0;
	}
	if(!isset($w) || $h == "")
	{
		$w = 0;
	}
	
	//farben r g und b von 0 - 255
	$r = max(min(255,$_GET['r']),0);
	$g = max(min(255,$_GET['g']),0);
	$b = max(min(255,$_GET['b']),0);
	
	
	//verlaufsfarbe 1
	$r1 = $r - 20;
	$g1 = $g - 20;
	$b1 = $b - 20;
	
	//verlaufsfarbe 2
	$r2 = $r + 30;
	$g2 = $g + 30;
	$b2 = $b + 30;
	
	//abfangen minimal und maximalwerte prüfen
	if($r1 < 0)
	{
		$r1 = 0;
	}
	if($r2 < 0)
	{
		$r2 = 0;
	}
	if($g1 < 0)
	{
		$g1 = 0;
	}
	if($g2 < 0)
	{
		$g2 = 0;
	}
	if($b1 < 0)
	{
		$b1 = 0;
	}
	if($b2 < 255)
	{
		$b2 = 255;
	}
	if($r1 > 255)
	{
		$r1 = 255;
	}
	if($r2 > 255)
	{
		$r2 = 255;
	}
	if($g1 > 255)
	{
		$g1 = 255;
	}
	if($g2 > 255)
	{
		$g2 = 255;
	}
	if($b1 > 255)
	{
		$b1 = 255;
	}
	if($b2 > 255)
	{
		$b2 = 255;
	}

	//start und endfarbe
	$s  = array($r1,$g1,$b1);
	$e  = array($r2,$g2,$b2);

	//bild erzeugen
	$image  = imagecreate($w,$h);

	//farbverlauf
	for ($i = 0; $i<$h; $i++) 
	{
		$l = ImageColorAllocate
		(
			$image,
			max(0,$s[0]-((($e[0]-$s[0])/-$h)*$i)),
			max(0,$s[1]-((($e[1]-$s[1])/-$h)*$i)),
			max(0,$s[2]-((($e[2]-$s[2])/-$h)*$i))
		); 
		imageline($image, 0, $i, $w, $i, $l);	
	}
	//fertiges bild
	imagePNG($image);	
	imagedestroy($image)	
?>

aufrufende index.php:

PHP:

<html>
	<head>
	</head>
	<body>	
				
		<div id='gradient1' style='width: 300px;'></div>
		<div id='gradient2' style='width: 100%;'></div>			
		
		<script language="javascript" type="text/javascript">		
			
			var ajax = null;
			
			// Stream Objekt erzeugen FF / IE
			if (window.XMLHttpRequest) 
			{
				ajax = new XMLHttpRequest();
			} 
			else if (window.ActiveXObject) 
			{
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			else 
			{
				alert('AJAX konnte nicht initialisiert werden !');
			}
							
			//bei onmouseup event soll refresh aufgerufen werden und
			//die farbwerte an farb.php neu übergeben werden.			
			function refresh() 
			{	
				//elemente des formulars abfragen
				var formObject = document.getElementById('farbe');				
				var formItems = formObject.getElementsByTagName('select');
				
				//url erzeugen
				var formQuery = '?';
				for(var count = 0; count < formItems.length; count++)
				{					
					formQuery += formItems[count].name + '=' + formItems[count].value +'&';					
				}				
				var url = 'farb.php'+formQuery;
				
				//streamobjekt ist vorhanden
				if(ajax != null)
				{
					//status prüfen
					ajax.onreadystatechange = ajax_html_status_ermitteln;
					ajax.open("GET", url, true);	
					ajax.ContentType = "image/png";
					ajax.send(null);
				}
				else
				{					
					alert("ajax ist null");
				}				
			}		

			function ajax_html_status_ermitteln()
			{
				if(ajax != null)
				{					
					var status = ajax.readyState;
					
					//ready
					if (status == 4) 
					{	
						//hier erhalte ich den imagestream. wie soll der verarbeitet werden?
						//###################################################################
						document.getElementById('bild').innerHTML = "<img src='"+ ajax.responseText + "'>";
						//###################################################################
						//alert(ajax.responseText);
					}				
				}
				else
				{
					alert("ajax in htmlstatusermitteln ist null");
				}
			}		

		</script>
		<form name="farbe" id="farbe" onmouseup="refresh();">
			<table>
				<tr>
					<td>
						<label>Grundfarbe:</label>			
					</td>
					<td>
						<select name="r">
							<?php for($cnt = 0; $cnt < 256; $cnt++) {	echo "<option value=$cnt>$cnt</option>"; } ?>
						</select>
					</td>
					<td>
						<select name="g">
							<?php for($cnt = 0; $cnt < 256; $cnt++) {	echo "<option value=$cnt>$cnt</option>"; } ?>
						</select>
					</td>
					<td>
						<select name="b">
							<?php for($cnt = 0; $cnt < 256; $cnt++) {	echo "<option value=$cnt>$cnt</option>"; } ?>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<label>Höhe:</label>			
					</td>
					<td>
						<select name="h">
							<?php for($cnt = 0; $cnt < 1000; $cnt++) {	echo "<option value=$cnt>$cnt</option>"; } ?>
						</select>
					</td>
					<td>
						<label>Breite:</label>			
					</td>
					<td>
						<select name="w">
							<?php for($cnt = 0; $cnt < 1000; $cnt++) {	echo "<option value=$cnt>$cnt</option>"; } ?>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<a onclick="refresh();">bla</a>
					</td>
					
				</tr>
			</table>
		</form>
		<div id="bild">
			
		</div>
	</body>
</html>

gruß
afr0

sokie · 14.05.2009

AW: php + js bild mit farbverlauf generieren

Du brauchst nicht notwendigerweise eine XMLHttpRequest um das zu machen.

deine funktion refresh braucht eigentlich nichts weiter zu machen als die farb.php?(mit Parametern) als bild auszugeben.

zB:

Code:

function refresh(){
  document.getElementsByTagName("body")[0].style.backgroundImage = "url(farb.php?" + parameter + ")";
}

vor der ausgabe musst du allerdings deine Values auslesen und die variable parameter mit den patrametern füllen (parameter = "w= & h= & r= &g= &b= "; )

afr0kalypse · 15.05.2009

AW: php + js bild mit farbverlauf generieren

na dass es so einfach ist hätte ich jetzt nicht gedacht

danke =)