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

Question

我试图让用户将图像粘贴到 div 中。问题是我需要它在 Firefox 中工作。

据我所知，自版本 13(我认为)以来的 Firefox 不允许 JavaScript 访问剪贴板，并且其中不存在 event.clipboard。我知道这是可以做到的，因为 Gmail 和 Yahoo 即使在 Firefox 中也允许这样做。

我只是希望它能以任何可能的方式工作，使用 jQuery、JavaScript、HTML5，只要它在最新的 Firefox 中工作就没关系。 (虽然没有 Flash)。

Answer 1

我使用了 this question 中的代码对于我的跨浏览器粘贴实现.. 它适用于我测试过的所有浏览器(向下滚动以获取实际的解决方案/代码)。需要注意的是，event.clipboardData 在粘贴事件执行完成后立即过期。

我继续并四重检查这在 Firefox 版本 19 中是否有效(我没有可用的 13，但听起来这个问题是关于新版本中功能的退化)。

以下是答案，引自 Nico Burns:

解决方案

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

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(现在是粘贴的数据)保存到一个变量中，将可编辑div的innerHTML恢复到原来的值，并提醒粘贴的数据。显然，在实际使用场景中，您可能想要的不仅仅是警报数据，您可以从这里使用它做任何您喜欢的事情。

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

---

在实际情况下，您可能希望先保存选择，然后再恢复 (Set cursor position on contentEditable <div>)。然后，您可以在用户启动粘贴操作时光标所在的位置插入粘贴的数据。

附言此代码的组合，IE <= 8 和 jsfiddle似乎不起作用，但它在非 jsfiddle 环境中的 ie <= 8 中确实有效。