2 Bilder ineinander überlaufen lassen

Tuxa

Hallo!

Ich stehe zur Zeit vor nem ziemlich üblen Problem.. hab relativ viel gegoogled, aber nix gefunden (höchstens mit Photoshop und da ists ja mehr als einfach *gg*)

Also: Ich schreibe zZ ein Tool, womit man einen Hintergrund aus 3 verschiedenen Teilen zusammenbasteln kann. Man hat sozusagen einen Linken Teil, einen rechten Teil und einen Übergang vom linken zum rechten Teil.
Per PHP hab ich das Problem, dass dabei Kanten entstehen.

Meine Idee: Ich lasse den Übergang um ca 20 Pixel auf beiden Seiten überstehen. Auf beide 20 Pixel Vorsprünge kopiere ich jetzt eine Art Maske mit Verlauf drauf. Die Maske selber ist weiß.
Das Weiß dieser Maske blende ich mit PHP aus und kopiere die 3 Teile zusammen.
Ums verständlich zu machen habe ich eine kleine Photoshop Zeichnung angefertigt - Bei Bild 1 wird ein Verlauf ins Transparente hinzugefügt (in meinem Szenario erstelle ich diesen mit der Maske) und daraufhin wird Bild 1 und Bild 2 zusammenkopiert.

Wenn es fertig ist, wird aber leider nur das exakte Weiß genommen (255,255,255) und demzufolge sieht das Ergebnis unschön aus.

In PHP blende ich so die weiße Maske aus:

PHP

$transparentColor = ImageColorAllocate($ausschnitt, 255, 255, 255);
imagecolortransparent($ausschnitt,$transparentColor);

Im angehängten "Extrembeispiel" seht ihr was ich meine.... (in der Praxis wird meistens eine Farbe auf eine ähnliche kopiert)

Ich hoffe jemand hat hier eine Idee ....

Bevor ichs vergesse: Es ist NICHT möglich die beiden Bilder vorher zu bearbeiten - die werden ebenfalls dynamisch erzeugt.

spinball

spinball empfiehlt: imagecopymerge

Anstatt die Bilder zu übermalen, füge sie mit Transparenz zusammen. Zuerst den linken Ausschnitt, dann den Rechten. Danach, in einer Schleife, die überlappenden Pixel mit ansteigender / abnehmender Transparenz. Hier ein Beispiel für eine zentrierte Verschmelzung:

PHP

<?php
function fade($left,$right,$overlap = 40) {
	// calculate dimensions
	list($left_width,$left_height) = getimagesize($left);
	list($right_width,$right_height) = getimagesize($right);
	$final_width = $left_width + $right_width - $overlap;
	$final_height = max($left_height,$right_height);


	// create images
	$left = imagecreatefrompng($left);
	$right = imagecreatefrompng($right);
	$final = imagecreatetruecolor($final_width,$final_height);
	imagefill($final,0,0,imagecolorallocate($final,255,255,255));


	// copy left image
	imagecopy($final,$left,0,0,0,0,$left_width - $overlap,$left_height);


	// copy right image
	imagecopy($final,$right,$left_width,0,$overlap,0,$right_width - $overlap,$right_height);


	// produce fader
	for($n = 0; $n < $overlap; $n++) {
		imagecopymerge($final,$left,$left_width - $overlap + $n,0,$left_width - $overlap + $n,0,1,$left_height,100 - (100 / $overlap) * $n);
		imagecopymerge($final,$right,$left_width - $overlap + $n,0,$n,0,1,$right_height,(100 / $overlap) * $n);
	}


	// output
	header("Content-Type: image/png");
	imagepng($final,null,0,PNG_NO_FILTERS);


	// free resources
	imagedestroy($left);
	imagedestroy($right);
	imagedestroy($final);
}


fade("blue.png","red.png",50);
?>

Alles anzeigen

Tuxa

Genau sowas habe ich gebraucht!! Sehr hilfreich und vor allem eine schnelle Antwort

Ich danke dir!!

2 Bilder ineinander überlaufen lassen

Maximilian Rupp 27. Dezember 2024 um 00:26

Jetzt mitmachen!

Rechtliches