Bilder einfügen

Harry Theodoulou

Der moderne Ansatz

Async Clipboard API verwenden

Wenn Sie Bilder programmatisch aus der Zwischenablage des Nutzers lesen möchten, z. B. nach dem Klicken auf eine Schaltfläche, können Sie die read() Methode der Async Clipboard API verwenden. Wenn die Berechtigung zum Lesen aus der Zwischenablage noch nicht erteilt wurde, wird sie beim ersten Aufruf der Methode mit navigator.clipboard.read() angefordert.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        const blob = await clipboardItem.getType(imageType);
        // Do something with the image blob.
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Source

Der klassische Ansatz

Auf das paste-Ereignis warten

Die klassische Methode zum Einfügen von Bildern ist die Verwendung der (synchronen) Clipboard API, mit der Sie auf das Feld clipboardData im Document: paste event zugreifen können. Diese Methode hat jedoch Einschränkungen. Da sie synchron ist, kann das Einfügen großer Datenmengen die Seite blockieren.

document.addEventListener('paste', async (e) => {
  e.preventDefault();

  for (const clipboardItem of e.clipboardData.files) {
    if (clipboardItem.type.startsWith('image/')) {
      // Do something with the image file.
    }
  }
});

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 13.1.

Source

Progressive Enhancement

In Browsern, die die Async Clipboard API nicht unterstützen, ist es nicht möglich, programmatisch auf die Zwischenablage des Nutzers zuzugreifen (z. B. durch Klicken auf eine Schaltfläche). Wenn Sie also bei einem paste-Ereignis auf die Zwischenablage eines Nutzers zugreifen möchten, können Sie die Async Clipboard API verwenden und auf die (synchrone) Clipboard API zurückgreifen.

Die ClipboardItem-Objekte aus navigator.clipboard.read haben ein types-Feld, das ein Array ist. File-Objekte aus event.clipboardData.files haben ein type-Feld, das ein String ist. Sie können jedes der Felder type oder types bedingt auf Bilder in der Zwischenablage prüfen:

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
      }
    }
  }
});

Weitere Informationen

  • Clipboard API auf MDN
  • Zugriff auf die Zwischenablage auf web.dev entsperren

Demo

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to paste images</title>
  </head>
  <body>
    <h1>How to paste images</h1>
    <p>Hit <kbd>⌘</kbd> + <kbd>v</kbd> (for macOS) or <kbd>ctrl</kbd> + <kbd>v</kbd>
      (for other operating systems) to paste images anywhere in this page.
    </p>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
      appendImage(blob);
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
        appendImage(blob);
      }
    }
  }
});

const appendImage = (blob) => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.append(img);
};