使用Clipboard.write()将图像和文本存储在一起

Question

我需要在剪贴板中存储一张图像和文本。我想使用剪贴板 API。可以吗？

我正在使用以下示例来存储图像或文本，但是可以组合吗？

copyImgBtn.addEventListener('click', async () => {
const response = await fetch(img.src)
const blob = await response.blob()
const blob1 = new Blob([textarea.value], { type: 'text/plain' })

var data = [new ClipboardItem({[blob.type] : blob})]
navigator.clipboard.write(data).then(function() {
        console.log("Copied to clipboard successfully!");
    }, function() {
        console.error("Unable to write to clipboard. :-(");
    })
})

谢谢你

Answer 1

由于您无法一次写入多个

ClipBoardItem

，因此我使用了单个文本/html blob。 （请注意，由于浏览器权限政策，下面的代码片段不会在这里运行）

我在这里找到了

blobToBase64

函数：https://stackoverflow.com/a/18650249/91017

希望这有帮助，

科恩

async function copyToClipboard() {
  const imageUrl = 'https://i.picsum.photos/id/739/200/300.jpg?hmac=xApsFbHx511SUVG612QiltrATotVTYu3Q4wfvGyYC1g';
  try {
    const imageData = await fetch(imageUrl);
    const imageBlob = await imageData.blob();
    const imageBase64Data = await blobToBase64(imageBlob);
    const html =
      `<p>Some text</p>
      <p><img src="${imageBase64Data}" alt="Some image"></p>`;

    const textBlob = new Blob([html], {
      type: 'text/html'
    });
    await navigator.clipboard.write([
      new ClipboardItem({
        [textBlob.type]: textBlob
      })
    ]);
    console.log('Copied.');
  } catch (err) {
    console.error(err.name, err.message);
  }
}

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

<button onclick="copyToClipboard()">Copy text and image to clipboard</button>