Zum Inhalt springen

ImageMagick - Transparenz

Erstellt am 18. Dezember 2007 · 2 Antworten · letzte Antwort am 20. Juni 2008

Tags: Bilder, Frage

digitalfreak ·

Guten Tag.
Ich habe folgendes Ziel:

Bild: entwickler.com/…/_png470b2fc0aba35

Exakt das will ich mit TYPO3 erstellen jedoch ohne die Bilbliothek die auf:
http://entwickler.com/itr/news/psecom,id,37831,nodeid,82.html

Beschrieben wird.

Mein erster Ansatz war folgender:

temp.bild = IMAGE
temp.bild {
  file = GIFBUILDER
  file {
  	XY = 210, 30
  	offset = 5,5
  	format = png
    transparentColor = #000000
    transparentColor.closest = 1

    # Erstellen einer farbigen Box der die ganze größe einnimmt
    20 = BOX
    20.dimensions = 0,0,205,25
    20.color = #69AB3A
    
    # Die Maske für die Ecke oben links setzen
    30 = IMAGE
    30.file = fileadmin/template/maske/cornermask_tl.png
    30.mask = fileadmin/template/maske/cornermask2_tl.png
    30.align = l,t
    
    # Die Maske für die Ecke oben rechts setzen
    40 = IMAGE
    40.file = fileadmin/template/maske/cornermask_tr.png
    40.mask = fileadmin/template/maske/cornermask2_tr.png
    40.align = r,t

    .... usw ....

  	70 = TEXT
  	70.text = Irgend n Text
    70.fontSize = 13
    70.iterations = 1
    70.antiAlias = 1
    70.offset = 20,30
    70.fontFile = fileadmin/template/ttf/rotis.TTF
    70.fontColor = #FFFFFF
    70.niceText = 0
  }
}

Das erstellt mir schonmal eine Box mit runden Ecken.

Jetz liegt es nahe den Schatten in Angriff zu nehmen. ABER da wir keine Transparenten Runden Ecken haben entpuppte sich das als riesen problem. Ich kann nur eine Farbe zur Transparenten Farbe erklären (oder nicht?).

1. Hat jemand spontan eine Idee wie man das erreichen könnte (egal wie PHP-GDLIB; ImageMagic)?
2. Geht es vielleicht doch mit TypoScript und ich hab nur was in der TSREF übersehen?
3. Wie mache ich einen ordentlichen Schlagschatten(Drop Shadow)

2. Lösungsansatz:
Extension: rounded_corners

Diese Extension ist schonmal ein riesen schritt jedoch bekomm ich die Weißen Ecken nicht transparent.

lib.test2 = IMAGE
lib.test2 {
   file = GIFBUILDER
   #aufruf der Extension
   file.params = makerounded
   file {
    XY = 210, 30
    offset = 5,5
    format = png
    backColor = #014A6C
    transparentColor = #FFFFFF
    transparentColor.closest = 1
   }
}

PHP Code um die weißen Ecken transparent zu machen

$testname = "test.png";
$cmd = t3lib_div::imageMagickCommand('convert', $img .' -fill none -fuzz 64% -draw \'matte 1,1 floodfill\' '.$testname);
exec($cmd);

return $testname;

Da ist auch schon viel schönes dran -> ABER -> Seltsamerweise ist nur eine Ecke (Pos 1,1) Transparent und die anderen werden Ignoriert(trotz hoher Tolleranz). Doch die Einstellungen sollten sich auf das komplette Bild auswirken laut ImageMagick Doku http://www.imagemagick.org/Usage/channels/#mask_floodfill

So langsam bin ich mit meinem Latain am Ende

digitalfreak ·

Neue Infos:
Hetzner hat auf IM 6.4.x umgestellt. Das heißt mit einer einfachen Maske und einer Zeile CMD kann man all das problemlos machen.

	function roundCorners($headerFile) {
	  $maske = "fileadmin/template/mask/maske.png";
    $headerFileOut = str_replace(".jpg",".png",$headerFile);
    
    // Ecke einsetzen
		$param = "{$headerFile} {$maske} +matte -compose CopyOpacity -composite  {$headerFileOut}";
    $cmd = t3lib_div::imageMagickCommand('convert', $param);
		exec($cmd);
    // C:\ImageMagick>convert C:\print\headpic.jpg  C:\print\maske.png +matte -compose CopyOpacity -composite C:\print\xxx.png
    return $headerFileOut;
  }

Wenn man nun noch schatten haben will, dann einfach den Parameter Shadow benutzen (-shadow 80x3+5+5).

Und solche dinger wie am Anfang sind absolut kein Problem mehr.

@georg
Das habe ich mir auch überlegt. Aber dann fehlt die Dynamik. Ich hab in meinem Beispiel oben jetzt nur eine Maske, die Quasi wie sone Keks ausstechform funktioniert 😃 ... geht aber auch anders rum. Das heißt wirklich nur die Ecken einsetzen. Und dann ist man bei den Dynamischen Runden Transparenten Ecken mit Schatten ^^ Ist ja kein Problem den ganzen Kram noch abzufragen welche Ecke wo wie wann usw.