Marking Demo | EU AI Act Compliance Demo

Variante 1

<img> Element

Die Standard-Methode für die C2PA-Integration. Das Bild wird als reguläres <img> Element eingebunden und die Web Components lesen die Credentials direkt aus dem Element.

KI-generiert (ChatGPT) KI-generiert

KI-generiert (Adobe Firefly) KI-generiert

Bearbeitet (Photoshop) Bearbeitet

Bearbeitet (Lightroom) Bearbeitet

Original (Kamera + Truepic) Original

HTML + JavaScript

<!-- HTML Struktur -->
<div class="relative inline-block">
  <img
    id="my-image"
    src="/images/ai-generated/example.jpg"
    crossorigin="anonymous"
  />

  <!-- C2PA Web Components -->
  <cai-popover interactive>
    <cai-indicator slot="trigger"></cai-indicator>
    <cai-manifest-summary slot="content" id="summary"></cai-manifest-summary>
  </cai-popover>
</div>

// JavaScript - SDK initialisieren und Manifest lesen
import { createC2pa } from '@contentauth/c2pa-web';
import 'c2pa-wc';

const c2pa = await createC2pa({ wasmSrc, workerSrc });
const img = document.getElementById('my-image');
const { manifestStore } = await c2pa.read(img);

if (manifestStore?.activeManifest) {
  document.getElementById('summary').manifestSummary = manifestStore.activeManifest;
}

Variante 2

CSS background-image

Für Hero-Sections, Cards oder andere Elemente mit CSS Background-Images. Das Bild muss separat per fetch() geladen werden, da CSS-Backgrounds nicht direkt vom SDK gelesen werden können.

Hero Section mit Background-Image

Dieses Bild ist als CSS background-image eingebunden. Die C2PA-Credentials werden über einen separaten Fetch geladen.

HTML + JavaScript (Background-Image)

<!-- HTML Struktur -->
<div
  class="hero-section relative"
  style="background-image: url('/images/hero.jpg');"
  data-c2pa-src="/images/hero.jpg"
>
  <!-- Content... -->

  <!-- C2PA Web Components (gleich wie bei <img>) -->
  <cai-popover interactive>
    <cai-indicator slot="trigger"></cai-indicator>
    <cai-manifest-summary slot="content" id="summary"></cai-manifest-summary>
  </cai-popover>
</div>

// JavaScript - Bild separat fetchen
const imageSrc = element.dataset.c2paSrc;
const response = await fetch(imageSrc);
const blob = await response.blob();

// Blob statt Element an SDK übergeben
const { manifestStore } = await c2pa.read(blob);

if (manifestStore?.activeManifest) {
  document.getElementById('summary').manifestSummary = manifestStore.activeManifest;
}

Vergleich der Varianten

Aspekt	<img> Element	background-image
SDK-Aufruf	`c2pa.read(imgElement)`	`c2pa.read(blob)`
Zusätzlicher Fetch	Nein – SDK liest direkt	Ja – Bild muss gefetcht werden
crossorigin	Erforderlich	Nicht relevant
Performance	Besser – kein doppelter Download	Overhead – zweiter Fetch nötig
Anwendungsfall	Content-Bilder, Galerien, Artikel	Hero-Sections, Cards, Overlays
Empfehlung	Bevorzugt	Bei Bedarf

Wichtig: crossorigin Attribut

Bei <img> Elementen muss das crossorigin="anonymous" Attribut gesetzt sein, damit das SDK auf die Bilddaten zugreifen kann. Ohne dieses Attribut verhindert die Same-Origin-Policy das Lesen der Pixel-Daten für die Hash-Validierung.