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>