Web API - Clipboard

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

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

  1. navigator.clipboard.writeText(text):这个方法用于将给定的文本复制到剪贴板。如果操作成功完成,它会返回一个已解析的 Promise。我们可以使用 await 来等待复制操作完成,或者使用 then 和 catch 来处理异步操作的结果。
  2. navigator.clipboard.write(data) :这个方法用于写入更复杂的数据类型,如文件、图像等。如果操作成功完成,它会返回一个已解析的 Promise。
  3. navigator.clipboard.readText():这个方法用于从剪贴板读取文本内容。它会返回一个 Promise,Promise 解析后会提供剪贴板中的文本内容。
  4. 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>
相关推荐
胡楚昊17 分钟前
Polar WEB(1-20)
前端
默|笙33 分钟前
【c++】红黑树的部分实现
开发语言·c++
轩情吖1 小时前
Qt常用控件之QSpinBox
开发语言·c++·qt·控件·桌面级开发·qspinbox·微调框
掘根1 小时前
【Qt】输入类控件2——SpinBox,DateEdit,TimeEdit,Dial,Slider
开发语言·qt
吃饺子不吃馅1 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
wshzrf1 小时前
【Java系列课程·Java学前须知】第3课 JDK,JVM,JRE的区别和优缺
java·开发语言·jvm
铅笔侠_小龙虾1 小时前
JVM 深入研究 -- 详解class 文件
java·开发语言·jvm
Humbunklung1 小时前
C# 使用应用RSA和ECC进行数字签名和签名验证
开发语言·c#·rsa·ecc
Larry_Yanan1 小时前
QML学习笔记(十四)QML的自定义模块
开发语言·笔记·qt·学习·ui
练习时长一年1 小时前
ApplicationContext接口实现(二)
java·开发语言