【问题标题】:Get Pasted Image from Clipboard Firefox从剪贴板 Firefox 获取粘贴的图像
【发布时间】:2013-02-21 14:31:35
【问题描述】:

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

根据我的阅读,Firefox 自 13 版以来(我认为)不允许 JavaScript 访问剪贴板,并且其中不存在 event.clipboard。我知道它可以做到,因为即使在 Firefox 中,Gmail 和 Yahoo 也支持它。

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

【问题讨论】:

标签: javascript jquery html firefox


【解决方案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 jsfiddle 的组合似乎不起作用,但在非 jsfiddle 环境中的 ie

【讨论】:

  • 它适用于文字而不是图像...我尝试打印屏幕并粘贴。没有出现。当我复制一个段落并粘贴时,会弹出一个复制的段落,但如果我尝试粘贴图像则不会弹出,例如打印屏幕
  • 当我尝试粘贴图像时。它一直持续到 waitforpastedata 函数,然后是 else 语句。它一直在方法内部循环。我尝试通过放置警报窗口。
  • 这不适用于 Safari/Mac OSX 中的图像数据。这是误导性的,因为问题询问的是图像数据,显然您没有在此答案中访问图像数据,您获得的 mime 类型是“text/html”或“text/plain”。我们期望“image/png”的 mime 和一些 polyfill 来替换 Safari 缺少的 image.getAsFile() API。
  • 我在 div 上使用 HTML5 input 事件而不是 Timeout
  • @Tomáš Zato:探索者不喜欢 div 上的输入事件。
猜你喜欢
  • 2013-07-08
  • 1970-01-01
  • 1970-01-01
  • 2012-06-09
  • 1970-01-01
  • 1970-01-01
  • 2013-01-25
  • 2012-05-02
  • 2010-10-04
相关资源
最近更新 更多