使用JavaScript从剪贴板粘贴图像

我们如何使用javascript将剪贴板中的图像粘贴到自定义富文本编辑器中？(ctrl + c和ctrl + v或快照).

有没有人使用过Ajax的富文本编辑器？将图像从剪贴板粘贴到Ajax RTE是否有效？

请分享你的想法!

谢谢!

1> maxi.weller..：

---

因为这个问题仍然经常出现在谷歌的搜索结果中,所以我想指出今天这是可能的,至少在谷歌Chrome(2011)的所有现代浏览器中都是如此(2018).他们将其实施用于GMail,但它适用于所有网站.

剪贴板功能的粘贴图像如何在Gmail和Google Chrome 12+中运行？

---

现在可以在其他浏览器中使用.我正在使用FF17,可以使用imgur.com的剪贴板功能粘贴

---

现在有一个方便的模块... https://github.com/layerssss/paste.js/

2> Jaykul..：

---

这在Chrome和Firefox中绝对是可行的.关于IE/Safari,我不太确定.

以imgur.com,onpaste和pasteboard.co为例,查看github上的粘贴代码以及Joel在他博客上的优秀文章

对于记录,您需要用户在元素上按Ctrl + V,然后您可以通过读取来捕获粘贴事件处理程序中的数据,event.clipboardData但要使其向下工作,您需要确保焦点在于空的contenteditable元素,并从那里拉结果,这在Firefox 22中不起作用.请看这里

3> belaz..：

---

现在我找到了clipboardData对象.

但它只从剪贴板中检索文本格式或URL. clipboardData仅限IE,它适用于字符串,如果粘贴图像则返回null.

一个测试例子

默认情况下,firefox上没有启用剪贴板访问,这里有解释.另一方面,execCommand()只处理文本值而不符合Firefox.

像其他人说的那样,代码在IE上运行的事实存在安全风险,任何站点都可以访问您的剪贴板文本.

复制图像相对URL的最简单方法是使用java applet,windows activeX插件,.net代码或拖放它.

---

你可以在gmail中做到这一点,因此它是可能的.

4> Saqib Ali..：

---

新的浏览器,如Firefox 4,支持将图像数据从剪贴板粘贴到RTE中,作为带有编码PNG数据的数据URI.但是,大多数Web应用程序错误地解析这些数据URI并将其丢弃.Yahoo邮件正确处理.但Gmail和Hotmail会丢弃它.我已经通知谷歌和微软.

5> 小智..：

---

为了帮助他人，我将在此处留下链接，其中包含Nick Rattalack的回答

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; // data url!
      reader.readAsDataURL(blob);
    }
  }
}

从剪贴板功能粘贴图像在Gmail和Google Chrome 12+中如何工作？