使用JavaScript从剪贴板粘贴图像

时间:2009-01-29 08:39:49

标签: javascript clipboard copy-paste

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

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

请分享你的想法!

谢谢!

6 个答案:

答案 0 :(得分:30)

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

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

答案 1 :(得分:13)

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

以imgur.com,onpaste和pasteboard.co为例,查看code for pasteboard on github以及Joel's excellent write up on his blog

对于记录,您需要用户在元素上按Ctrl + V,然后您可以通过读取event.clipboardData来捕获粘贴事件处理程序中的数据,但要制作它在低级别工作,你需要确保关注一个空的 contenteditable 元素,并从那里拉取结果,这在Firefox 22中不能很好地工作。请参阅here < / p>

答案 2 :(得分:10)

现在我找到了clipboardData Object

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

测试示例

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

默认情况下,firefox上没有启用剪贴板访问,解释here。 另一方面,execCommand()仅处理文本值,并且不符合Firefox。

与其他人一样,代码适用于IE的事实存在安全风险,任何网站都可以访问您的剪贴板文本。

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

答案 3 :(得分:10)

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

答案 4 :(得分:3)

为帮助他人,我将在此处留下链接,其中包含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);
    }
  }
}

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

答案 5 :(得分:1)

不幸的是,无法将剪贴板中的图像粘贴到RTE。

如果从包含图像和某些文本的Microsoft Word等桌面应用程序复制blob,图像将显示为损坏的引用(虽然比例将是正确的)并且文本将被正确粘贴(格式化将迷路了。

唯一可能的是在RTE中复制图像并在RTE中粘贴回来。