Image Watermark

Diese TYPO3-Erweiterung ermöglicht es, Bildern Wasserzeichen hinzuzufügen, indem dafür eine Fluid Viewhelper verwendet wird. Das Ergebnis ist ein neues Bild, das aus dem Original (Hintergrund) und dem Wasserzeichen erzeugt wird.

Der Viewhelper arbeitet wie der Image Viewhelper aus Fluid (konkret, er erweitert diesen Viewhelper), d. h. es gibt die gleichen Optionen (z. B. Skalieren des Bildes). Es können alle Parameter des Viewhelpers "f:image" verwendet werden (z. B. "src", "width", ...).

Es gibt zwei Möglichkeiten, Wasserzeichen zu erzeugen:

Positionierte Wasserzeichen

Ermöglicht das Positionieren von Wasserzeichen auf einem Bild. Verwenden Sie Bilder im PNG-Format, um transparente Bereiche im Wasserzeichen zu ermöglichen.

Parameter	Beschreibung
overlaySrc	Pfad zum Wasserzeichen-Bild.
method	Kann leer gelassen werden, "position" ist die Standardeinstellung.
gravity	Positionierung des Wasserzeichen-Bildes: Center, North, NorthWest, West, SouthWest, South, SouthEast, East, NorthEast (Groß-/Kleinschreibung muss nicht beachtet werden)
compose	Methode, nach der die Bilder kombiniert werden, wenn "positionierte Wasserzeichen" erzeugt werden: Copy, Screen, Multiply, Difference, Exclusion, Plus, ModulusAdd, Minus, ModulusSubtra, Lighten, Darken, Divide, LinearDodge, LinearBurn, ColorBurn, ColorDodge, Overlay, SoftLight, PegtopLight, HardLight, PinLight, LinearLight, VividLight (siehe auch http://www.imagemagick.org/Usage/compose/tables/, Groß-/Kleinschreibung muss nicht beachtet werden)
geometry	Verschiebung in Pixeln, z. B. +5+5.

Zweites Bild

Es kann ein zweites Bild hinzugefügt werden, indem die folgenden Parameter analog verwendet werden:

Parameter	Beschreibung
overlaySrc2	Siehe oben...
gravity2	Siehe oben...
compose2	Siehe oben...
geometry2	Siehe oben...

Skalierte Wasserzeichen

Diese Variante skaliert das Wasserzeichen auf die Größe des Hintergrundbildes. Beste Resultate lassen sich mit dem JPG-Format erzielen, unter Umständen entstehen mit PNG-Bildern unerwartete Resultate.

Bei dieser Variante können keine weiteren Parameter außer "method" und "overlaySrc" verwendet werden.

Parameter

Parameter	Beschreibung
method	Muss hier auf "scale" gesetzt werden.
overlaySrc	Pfad zum Wasserzeichen-Bild.
fetchUrl	Wenn gesetzt gibt der ViewHelper nur die URL zum Bild zurück.

Beispiele

Fluid Code

Diese Beispiele finden Sie in Resources/Private/Templates/Example.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
      xmlns:w="http://typo3.org/ns/CodingMs/ImageWatermark/ViewHelpers"
      data-namespace-typo3-fluid="true">

<h1>Watermark Examples</h1>

<h2>Positioned Watermarks</h2>
<h3>default</h3>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        width="600" />

<h3>compose: multiply, geometry:+20+20, gravity:NorthEast</h3>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        gravity="NorthEast"
        compose="multiply"
        geometry="+20+20"
        width="600" />

<h3>compose: screen, geometry:+0+0, gravity:SouthEast</h3>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        gravity="SouthEast"
        compose="screen"
        geometry="+0+0"
        width="600" />

<h3>compose: difference, geometry:+30+30, gravity:NorthWest</h3>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        gravity="NorthWest"
        compose="difference"
        geometry="+30+30"
        width="600" />

<h3>two overlay images</h3>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        gravity="SouthWest"
        compose="difference"
        geometry="+20+120"
        width="600"
        overlaySrc2="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
        gravity2="NorthEast"
        compose2="multiply"
        geometry2="+120+20" />

<h2>Scaled Watermark</h2>
<w:watermark
        src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
        overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo-big.jpg"
        method="scale"
        width="600" />

<h2>Fetch url</h2>
<f:variable name="watermarkImageUrl">{w:watermark(
    src: 'fileadmin/fluid_form_upload/-form-6-complete-photoRequired.jpg',
    overlaySrc: 'typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo-big.jpg',
    method: 'scale',
    width: 1200,
    fetchUrl: 'true'
    )}</f:variable>
<pre>{watermarkImageUrl}</pre>

</html>