JS或带图像的角度复制文本

Question

我需要复制文本和图像在一次点击。我试过下面的代码。我只点击并粘贴了"clip_message“

我的HTML：

<button id="copy" onclick="writeClipImg()"><strong>Copy</strong></button>

我的JS代码

async function writeClipImg() {
  try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
            'text/plain': blob2,
        'image/png': blob
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
}

实际上，我在JS中尝试过。如果我有角度的解决方案，那也是更好的。请帮助我在一次点击复制两个。谢谢

Answer 1

也许，我们不能在这段时间内同时复制图像和文本。

根据Clipboard.write()文档：

注意:一次只能传入一个剪贴板项目。

我试图将一个数组传递给cliboard.write方法，但它抛出了以下错误：

(索引)：29未实现对多个ClipboardItems的NotAllowedError支持。

顺便说一句，你也可以检查这个例子。

​

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="copy()">Copy Button</button>
  <script>
    async function copy(){
      try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    // await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
           [blob.type]: blob
      }),
        new ClipboardItem({
            'text/plain': blob2
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
    }
  </script>
</body>
</html>

​