用Javascript将图像从浏览器复制到剪贴板？答案

【问题标题】：Copy Image to Clipboard from Browser in Javascript?用Javascript将图像从浏览器复制到剪贴板？
【发布时间】：2011-01-20 06:23:18
【问题描述】：

是否可以在 javascript 中将图像复制到剪贴板？我知道如何复制文字，但你能复制图片吗？

这是安全限制吗？

【问题讨论】：

@Irwin：这个问题专门针对图像，而不是文本。

标签： javascript browser image clipboard

【解决方案1】：

最后一个答案是从 2010 年开始，从那时起浏览器发生了很大变化。使用这个简单的功能，您可以将您想要的任何内容（文本、图像、表格等）（在您的页面上）复制到剪贴板。该函数接收元素 id 或元素本身。

function copyElementToClipboard(element) {
  window.getSelection().removeAllRanges();
  let range = document.createRange();
  range.selectNode(typeof element === 'string' ? document.getElementById(elementName) : element);
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
 }

【讨论】：

【解决方案2】：

不，您不能将图像复制到剪贴板。将任何东西复制到剪贴板是每个浏览器的安全限制，但如果它们具有适当的安全设置，您可以将文本复制到 IE 中的剪贴板。此处 Mozilla 列出了由程序访问剪贴板引起的 some of the problems。

【讨论】：

@hobodave 那么你一定是用 IE 浏览的，并且你已经更改了设置以允许它。要么，要么你有一个特殊的 FireFox 插件允许它。
@hobodave 使用 Firefox 访问 github 并报告剪贴板中的内容。
@Josh：抱歉，你是对的。显然有办法在 FF 中做到这一点：febooti.com/support/website-help/…。 github上的功能其实是用Flash实现的；我以为 :-D 它是 javascript。
我应该说，我已经看到了 Flash 和 Java Applet 实现，它们有助于复制到剪贴板（使用 Javascript 调用它们）。然而，这两种选择都不适合任何生产环境，IMO。
谢谢，只是想确定这一点，这样人们就不必带着虚假的希望寻找几个小时了 :)

【解决方案3】：

是的，大多数脚本只支持文本。

http://forums.mozillazine.org/viewtopic.php?f=25&t=1195035&start=0

上述网站也在讨论同样的问题。

以下网站说的涉及到安全问题，

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

但这不适用于最新版本的 Mozilla。

【讨论】：

【解决方案4】：

使用Clipboard API。有一个example on MDN specifically for images。

注意：2021 年的今天，ClipboardItem 可以在 Firefox 中通过将dom.events.asyncClipboard.clipboardItem 设置为true 来启用。其余主流浏览器都支持。因此，添加一些检查并告知用户如何打开该功能。

这是一个例子：

async function writeClipImg() {
  if (!('ClipboardItem' in window)) {
    return alert(
      "Your browser doesn't support copying images into the clipboard."
      + " If you use Firefox you can enable it"
      + " by setting dom.events.asyncClipboard.clipboardItem to true."
    )
  }
  try {
    const imgURL = document.getElementById('image').src
    const data = await fetch(imgURL)
    const blob = await data.blob()

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ])
    console.log('Fetched image copied.')
  } catch(err) {
    console.error(err.name, err.message)
  }
}

【讨论】：