从剪贴板Firefox获取粘贴的图像

Get Pasted Image from Clipboard Firefox

本文关键字：图像 获取 剪贴板 Firefox      更新时间：2023-09-26

我正在尝试允许用户将图像粘贴到div中。问题是我需要它在Firefox中运行。

据我所知，Firefox从13版开始(我认为(就不允许JavaScript访问剪贴板，event.clipboard也不存在于其中。我知道这是可以做到的，因为Gmail和雅虎甚至在Firefox中也允许这样做。

我只想让它在任何可能的地方工作，与jQuery、JavaScript、HTML5一起工作，只要它在最新的Firefox中工作就没关系。(不过没有Flash(。

我使用了这个问题中的代码来实现跨浏览器粘贴。。它适用于我测试过的所有浏览器(向下滚动查看实际的解决方案/代码(。应当注意，event.clipboardData在粘贴事件已经完成执行之后立即到期。

我继续仔细检查了一下，这在Firefox版本19中是否有效(我没有13个可用的，但听起来这个问题是关于新版本中某个功能的降级(。

以下是引用自Nico Burns的答案：

解决方案

在IE6+、FF 3.5+、Opera、Chrome、Safari的最新ish版本中进行了测试。

function handlepaste (elem, e) {
  var savedcontent = elem.innerHTML;
  if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
    if (/text'/html/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData('text/html');
    }
    else if (/text'/plain/.test(e.clipboardData.types)) {
      elem.innerHTML = e.clipboardData.getData('text/plain');
    }
    else {
      elem.innerHTML = "";
    }
    waitforpastedata(elem, savedcontent);
    if (e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    }
    return false;
  }
  else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
    elem.innerHTML = "";
    waitforpastedata(elem, savedcontent);
    return true;
  }
}
function waitforpastedata (elem, savedcontent) {
  if (elem.childNodes && elem.childNodes.length > 0) {
    processpaste(elem, savedcontent);
  }
  else {
    that = {
      e: elem,
      s: savedcontent
    }
    that.callself = function () {
      waitforpastedata(that.e, that.s)
    }
    setTimeout(that.callself,20);
  }
}
function processpaste (elem, savedcontent) {
  pasteddata = elem.innerHTML;
  //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here
  elem.innerHTML = savedcontent;
  // Do whatever with gathered data;
  alert(pasteddata);
}
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>

解释

onpaste事件附加了handlepaste函数，并传递了两个参数：this(即对事件所附加的元素的引用(和event(即事件对象(。

handlepaste功能：

第一行只是将可编辑div的内容保存到一个变量中，以便在最后再次恢复。

if检查浏览器是否为webkit浏览器(chrome或safari(，如果是，则将可编辑div的内容设置为要粘贴的数据。然后它会取消该事件，以防止webkit粘贴任何内容两次。这是因为webkit很尴尬，如果你简单地清除div，它就不会粘贴任何东西

如果它不是一个webkit浏览器，那么它只需清除可编辑的div.

然后调用waitforpastedata函数

waitforpastedata功能：

这是必要的，因为粘贴的数据不会直接出现，所以如果您直接调用processpaste，那么它就没有任何数据要处理。

它所做的是检查可编辑div是否有任何内容，如果有，则调用processpaste，否则它会设置一个计时器来调用自己，并在20毫秒后再次检查。

processpaste功能：

该函数将可编辑div的innerHTML(现在是粘贴的数据(保存到一个变量中，将可编辑divinnerHTML恢复到其原始值，并提醒粘贴的数据。显然，在真实的使用场景中，您可能想要的不仅仅是警报数据，您可以从这里对它做任何您喜欢的事情。

您可能还希望通过某种数据清理过程来运行粘贴的数据。这可以在它仍在可编辑div中时完成，也可以在提取的字符串上完成。

在实际情况下，您可能希望之前保存所选内容，然后恢复(将光标位置设置为可编辑<div>(。然后，您可以在用户启动粘贴操作时光标所在的位置插入粘贴的数据。

p.S.此代码的组合，IE<=8和jsfiddle似乎不起作用，但它在ie<=中起作用8在非jsfiddle环境中。

相关文章：