Visual cookbook

These images come from the repository’s example cases. Use them to identify the feature you need, then follow the linked guide for current code.

A text watermark placed near the bottom of a waterfall photo — Text layer with color, style, and anchored placement

An image watermark placed over a colorful background — Image layer scaled and positioned over a background

Several independently styled text watermarks — Multiple text layers with independent styles

A rotated image watermark over a background — Rotated image layer

Common recipes

A subtle corner signature

await Marker.markText({
  backgroundImage: { src: photo },
  watermarkTexts: [
    {
      text: '© Acme Studio',
      position: { position: Position.bottomRight, X: 20, Y: 20 },
      style: { color: '#FFFFFFB3', fontSizeRatio: 0.022 },
    },
  ],
  saveFormat: ImageFormat.jpg,
  quality: 92,
});

A sharp QR watermark

await Marker.markImage({
  backgroundImage: { src: photo },
  watermarkImages: [
    {
      src: qrCode,
      position: { position: Position.bottomLeft, X: 24, Y: 24 },
      scale: 0.5,
      trimTransparentPadding: true,
    },
  ],
  saveFormat: ImageFormat.png,
});

A logo below a text label

With Marker.mark, later layers draw over earlier layers.

await Marker.mark({
  backgroundImage: { src: photo },
  watermarks: [
    {
      type: 'image',
      src: logo,
      position: { position: Position.center },
      alpha: 0.8,
    },
    {
      type: 'text',
      text: 'APPROVED',
      position: { position: Position.center },
      style: { color: '#FFFFFF', fontSize: 32, bold: true },
    },
  ],
  saveFormat: ImageFormat.png,
});

To try the Web SDK without installing anything, open the live playground. For native controls and the architecture status panel, run the React Native example or Expo example.