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.

ParameterBeschreibung
overlaySrcPfad zum Wasserzeichen-Bild.
methodKann leer gelassen werden, "position" ist die Standardeinstellung.
gravityPositionierung des Wasserzeichen-Bildes: Center, North, NorthWest, West, SouthWest, South, SouthEast, East, NorthEast (Groß-/Kleinschreibung muss nicht beachtet werden)
composeMethode, 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)
geometryVerschiebung in Pixeln, z. B. +5+5.

Zweites Bild

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

ParameterBeschreibung
overlaySrc2Siehe oben...
gravity2Siehe oben...
compose2Siehe oben...
geometry2Siehe 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

ParameterBeschreibung
methodMuss hier auf "scale" gesetzt werden.
overlaySrcPfad zum Wasserzeichen-Bild.
fetchUrlWenn 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>

Ergebnis

default

Example 1

compose: multiply, geometry:+20+20, gravity:NorthEast

Example 2

compose: screen, geometry:+0+0, gravity:SouthEast

Example 3

compose: difference, geometry:+30+30, gravity:NorthWest

Example 4

two overlay images

Example 5

Scaled Watermark

Example 6