Clipboard: write()-Methode

data

Ein Array von ClipboardItem Objekten, die die Daten enthalten, die in die Zwischenablage geschrieben werden sollen.

Ein Promise, das aufgelöst wird, wenn die Daten in die Zwischenablage geschrieben wurden. Beachten Sie, dass, wenn das zugrunde liegende Betriebssystem das Speichern mehrerer nativer Zwischenablage-Elemente in der Systemzwischenablage nicht unterstützt, nur das erste ClipboardItem im Array gespeichert wird.

Das Versprechen wird abgelehnt, wenn es der Zwischenablage nicht gelingt, in die Zwischenablage zu schreiben.

NotAllowedError DOMException

Wird ausgelöst, wenn das Schreiben in die Zwischenablage nicht erlaubt ist.

Das Schreiben in die Zwischenablage kann nur in einem sicheren Kontext durchgeführt werden.

Zusätzliche Sicherheitsanforderungen werden im Abschnitt Sicherheitsüberlegungen des API-Übersichtsthemas behandelt.

Diese Beispiel-Funktion ersetzt den aktuellen Inhalt der Zwischenablage mit einem angegebenen String, wenn eine Taste gedrückt wird. Beachten Sie, dass Sie für diesen speziellen Fall ebenso gut Clipboard.writeText() verwenden könnten.

button.addEventListener("click", () => setClipboard("<empty clipboard>"));

async function setClipboard(text) {
  const type = "text/plain";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];
  await navigator.clipboard.write(data);
}

Die setClipboard() Methode beginnt mit der Erstellung eines neuen Blob Objekts. Dieses Objekt wird benötigt, um ein ClipboardItem Objekt zu konstruieren, das an die Zwischenablage gesendet wird. Der Blob Konstruktor nimmt den Inhalt, den wir kopieren möchten, und seinen Typ entgegen. Dieses Blob Objekt kann aus vielen Quellen abgeleitet werden, z. B. einem Canvas.

Als nächstes erstellen wir ein neues ClipboardItem Objekt, in das der Blob zum Senden an die Zwischenablage eingefügt wird. Der Schlüssel des an den ClipboardItem Konstruktor übergebenen Objekts gibt den Inhaltstyp an, der Wert gibt den Inhalt an. Dann wird write() mit await aufgerufen. Ein try..catch Block könnte verwendet werden, um etwaige Fehler beim Schreiben der Daten abzufangen.

Dieses Beispiel zeichnet ein blaues Rechteck auf das Canvas. Sie können auf das Rechteck klicken, um den Inhalt des Canvas als Bild in die Zwischenablage zu kopieren, und dann ein anderes Element auswählen und den Inhalt aus der Zwischenablage einfügen.

HTML

Das HTML definiert nur unser <canvas> Element und das <div> Element mit der ID target, wo das Canvas-Bild eingefügt wird.

<canvas id="canvas" width="100" height="100"></canvas>

<div id="target">Paste here.</div>

<pre id="log"></pre>

#log {
  height: 60px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

Zuerst definieren wir eine async Funktion, um ein Canvas in einen Blob zu kopieren. Dies fasst die alte Callback-basierte HTMLCanvasElement.toBlob() Methode in eine intuitivere, auf Promise basierende Funktion zusammen.

// Async/await method replacing toBlob() callback
async function getBlobFromCanvas(canvas) {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) {
        resolve(blob);
      } else {
        reject(new Error("Canvas toBlob failed"));
      }
    });
  });
}

Als nächstes richten wir unser Canvas ein und fügen einen Ereignislistener für das click Ereignis hinzu.

Wenn Sie auf das blaue Rechteck klicken, überprüft der Code zuerst, ob die Zwischenablage Daten vom Typ "image/png" unterstützt. Falls ja, wird das Canvas mit dem angezeigten Rechteck in einen Blob kopiert, und dann wird der Blob zu einem ClipboardItem hinzugefügt und in die Zwischenablage geschrieben.

const canvas = document.getElementById("canvas");

// Set up canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = "cornflowerblue";
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener("click", copyCanvasContentsToClipboard);
const target = document.getElementById("target");

async function copyCanvasContentsToClipboard() {
  if (ClipboardItem.supports("image/png")) {
    // Copy canvas to blob
    try {
      const blob = await getBlobFromCanvas(canvas);
      // Create ClipboardItem with blob and it's type, and add to an array
      const data = [new ClipboardItem({ [blob.type]: blob })];
      // Write the data to the clipboard
      await navigator.clipboard.write(data);
      log("Copied");
    } catch (error) {
      log(error);
    }
  } else {
    log("image/png is not supported");
  }
}

Beachten Sie, dass die Unterstützung von PNG-Dateien in der Zwischenablage Teil der Spezifikation ist, sodass wir die Überprüfung mit ClipboardItem.supports() oben eigentlich nicht benötigen (sie gibt immer true zurück). Die Überprüfung wäre nützlicher in Fällen, in denen wir einen optionalen Dateityp abrufen oder eine Ressource mit unbekanntem Typ vorab auswählen.

Dann definieren wir einen Ereignislistener für paste Ereignisse auf einem Element, wo wir die Zwischenablageinhalte als Bild anzeigen wollen. Die FileReader API ermöglicht es uns, den Blob mit der Methode readAsDataUrl zu lesen und ein <img> Element mit den Canvas-Inhalten zu erstellen:

target.addEventListener("paste", (event) => {
  const items = (event.clipboardData || window.clipboardData).items;
  const blob = items[0].getAsFile();
  const reader = new FileReader();

  reader.addEventListener("load", (event) => {
    const img = new Image();
    img.src = event.target.result;
    target.appendChild(img);
  });

  reader.readAsDataURL(blob);
});

body {
  font-family: sans-serif;
}
#target {
  border: 2px solid;
  padding: 1rem;
  height: 150px;
}
img {
  margin: 0.5rem;
}

Ergebnis

Das Ergebnis wird unten gezeigt. Klicken Sie zuerst auf das blaue Quadrat und wählen Sie dann den Text "Paste here" und verwenden Sie die spezifischen Tastenkombinationen Ihres Betriebssystems, um aus der Zwischenablage einzufügen (zum Beispiel Ctrl+V unter Windows).

• Clipboard API
• Bildunterstützung für Async Clipboard Artikel
• Clipboard.writeText()
• Clipboard.read()
• Clipboard.readText()