当前位置：首页 > article >正文

Web API - Clipboard

article 2024/12/2 22:52:50

Clipboard API ，它允许我们与用户的剪贴板进行交互，实现复制和粘贴的功能。

Clipboard API 提供了以下方法，用于实现复制和粘贴：

navigator.clipboard.writeText(text)：这个方法用于将给定的文本复制到剪贴板。如果操作成功完成，它会返回一个已解析的 Promise。我们可以使用 await 来等待复制操作完成，或者使用 then 和 catch 来处理异步操作的结果。
navigator.clipboard.write(data) ：这个方法用于写入更复杂的数据类型，如文件、图像等。如果操作成功完成，它会返回一个已解析的 Promise。
navigator.clipboard.readText()：这个方法用于从剪贴板读取文本内容。它会返回一个 Promise，Promise 解析后会提供剪贴板中的文本内容。
navigator.clipboard.read()：这个方法用于读取更复杂的数据类型，如文件、图像等。它会返回一个 Promise，Promise 解析后会提供剪贴板中的数据。

粘贴复制文本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Clipboard API 示例</title>
    <style>
      #output {
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Clipboard API 示例</h1>
    <input type="text" id="inputField" placeholder="输入要复制的文本">
    <button id="copyButton">复制文本到剪贴板</button>

    <button id="pasteButton">从剪贴板粘贴文本</button>
    <div id="output">粘贴的文本将显示在这里。</div>

    <script>
      const copyButton = document.getElementById('copyButton');
      const pasteButton = document.getElementById('pasteButton');
      const inputField = document.getElementById('inputField');
      const output = document.getElementById('output');

      // 复制文本到剪贴板
      copyButton.addEventListener('click', async () => {
        const text = inputField.value;
        if (text.trim() === '') {
          alert('请输入要复制的文本。');
          return;
        }
        try {
          await navigator.clipboard.writeText(text);
          alert('文本已复制到剪贴板！');
        } catch (error) {
          console.error('复制失败：', error);
          alert('复制失败，请手动复制。');
        }
      });

      // 从剪贴板粘贴文本
      pasteButton.addEventListener('click', async () => {
        try {
          const text = await navigator.clipboard.readText();
          output.textContent = `粘贴的文本：${text}`;
        } catch (error) {
          console.error('粘贴失败：', error);
          alert('粘贴失败，请手动输入。');
        }
      });
    </script>
  </body>
</html>

粘贴复制图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Clipboard Image Example</title>
  <style>
    img {
      width: 50%;
    }
  </style>
</head>

<body>
  <h1>Clipboard Image Example</h1>
  <img id="sourceImage" src="./bing0509.png" alt="Sample Image">
  <br />
  <button id="copyImageButton">复制图片</button>
  <button id="pasteImageButton">粘贴图片</button>
  <div id="imageDisplay"></div>

  <script>
    const copyImageButton = document.getElementById('copyImageButton');
    const pasteImageButton = document.getElementById('pasteImageButton');
    const sourceImage = document.getElementById('sourceImage');
    const imageDisplay = document.getElementById('imageDisplay');

    // 复制图片到剪贴板
    copyImageButton.addEventListener('click', async () => {
      try {
        const response = await fetch(sourceImage.src);
        const blob = await response.blob();
        const item = new ClipboardItem({ 'image/png': blob });
        await navigator.clipboard.write([item]);
        alert('图片已复制到剪贴板！');
      } catch (err) {
        console.error('无法复制图片到剪贴板：', err);
      }
    });

    // 从剪贴板粘贴图片
    pasteImageButton.addEventListener('click', async () => {
      try {
        const clipboardItems = await navigator.clipboard.read();
        for (const clipboardItem of clipboardItems) {
          const types = clipboardItem.types;
          if (types.includes('image/png')) {
            const blob = await clipboardItem.getType('image/png');
            const imageUrl = URL.createObjectURL(blob);
            const img = document.createElement('img');
            img.src = imageUrl;
            imageDisplay.appendChild(img);
            alert('图片已从剪贴板粘贴！');
            break;
          }
        }
      } catch (err) {
        console.error('无法从剪贴板粘贴图片：', err);
      }
    });
  </script>
</body>

</html>

查看全文

http://www.kler.cn/a/419063.html