Bilder kopieren

Thomas Steiner
Thomas Steiner
Twitter GitHub Glitch Startseite

Viele moderne Browser unterstützen das Kopieren von Bildern in die Zwischenablage in den Formaten PNG und SVG. Andere Formate werden aus Sicherheitsgründen noch nicht unterstützt.

Die moderne Art

Async Clipboard API verwenden

Die Methode Clipboard.write() verwendet ein Array von ClipboardItem-Objekten und gibt ein Versprechen zurück, das aufgelöst wird, wenn das Bild erfolgreich in die Zwischenablage geschrieben wurde. Clipboard.write() kann nur vom window-Objekt verwendet werden, das im Fokus ist.

Unterstützte Browser

  • 66
  • 79
  • 13.1

Quelle

Die klassische Art

navigator.clipboard.writeText() verwenden

Obwohl noch nicht alle Browser navigator.clipboard.write() für Binärdaten unterstützen, unterstützen alle Browser navigator.clipboard.writeText(). Wenn Sie ein SVG-Bild kopieren möchten, können Sie den SVG-Quellcode kopieren. Bei PNG-Bildern ist das leider nicht möglich.

Unterstützte Browser

  • 66
  • 79
  • 63
  • 13.1

Quelle

Progressive Enhancement

const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);
  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Weitere Informationen

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 copy images</title>
  </head>
  <body>
    <h1>How to copy images</h1>
    <img src="assets/fugu.svg" alt="Fugu fish." width="128" height="128">
    <button type="button">Copy</button>
  </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


        const button = document.querySelector('button');
const img = document.querySelector('img');

button.addEventListener('click', async () => {
  const responsePromise = fetch(img.src);

  try {
    if ('write' in navigator.clipboard) {
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/svg+xml': new Promise(async (resolve) => {
            const blob = await responsePromise.then(response => response.blob());
            resolve(blob);
          }),
        }),
      ]);
      // Image copied as image.
    } else {
      const text = await responsePromise.then(response => response.text());
      await navigator.clipboard.writeText(text);
      // Image copied as source code.
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});