JavaScript: 将文本和图像复制到剪贴板

Question

我有一个相当简单的要求来实现 - 网页上的一个按钮，它将带有图像的文本块复制到剪贴板。

我知道如何复制文本，我知道如何复制图像。据我所知，我不能两者都做。我是不是遗漏了什么或者 JavaScript 确实不可能？谁能想到任何替代解决方案（我会说 Flash 是 1995 年 :-)）。

非常感谢

Answer 1

您可以通过结合 execCommand and Range/Selection 功能来做到这一点：

let button = document.querySelector('#copy-button');

button.addEventListener('click', function () {
  let selection = window.getSelection();
  let container = document.querySelector('.container');

  if (selection.rangeCount > 0) {
    selection.removeAllRanges();
  }
  
  const range = document.createRange();
  range.selectNode(container);
  selection.addRange(range);
  document.execCommand("copy");
  selection.removeAllRanges();
});

.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<button id="copy-button">copy</button>
<div class="container">
  <img src="https://moview.nl/wp-content/uploads/2018/04/Mountain_RvB-3-bw.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

JavaScript: 将文本和图像复制到剪贴板

JavaScript: copy text AND image to clipboard

html

javascript

clipboard

web