js复制图片到粘贴板

涂山 · 2023-10-31 12:51 · 浏览 3.4k · web前端

有时候我们需要将一张图片复制到粘贴板，这个时候就可以用浏览器的clipboard提供的支持了。需要注意的是，图片必须和网站是在一个域名下面，否则会跨域导致复制失败。如果需要跨域复制图片可以考虑使用后台程序代理输出一下图片。

<!DOCTYPE html>
<html>
<head>
  <title>javascript复制图片到剪贴板</title>
</head>
<body>
  <img id="myImage" src="./vscode.png" alt="要复制的图片">

  <button id="copyButton">复制图片</button>

  <script>
    const copyButton = document.getElementById('copyButton');
    const myImage = document.getElementById('myImage');

    copyButton.addEventListener('click', async () => {
      try {
        const blob = await fetch(myImage.src).then(response => response.blob());
        const items = [
          new ClipboardItem({ 'image/png': blob })
        ];
        await navigator.clipboard.write(items);
        alert('图片已复制到剪贴板！');
      } catch (err) {
        console.error('复制图片失败：', err);
      }
    });
  </script>
</body>
</html>

以上就是js复制图片功能，就是这么简单。

javascript

评论