使用 JavaScript 从剪贴板粘贴图像

IT技术 javascript clipboard copy-paste
2021-01-17 21:16:05

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

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

请分享您的想法!

谢谢!

6个回答

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

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

@AlexS 似乎不太值得,也许 OP 可以将它添加到此分析仪中。
2021-03-15 21:16:05
现在可以在其他浏览器中使用。我正在使用 FF17 并且可以使用 imgur.com 的剪贴板功能粘贴
2021-03-23 21:16:05
@Mr5o1 对我来说效果很好,你应该把它作为自己的答案发布
2021-04-13 21:16:05

为了帮助其他人,我将在此处留下链接,其中包含 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+ 中工作?

您可以使用 将 blob 完全存储在数据库中XMLHttpRequest,而无需任何FileReader使用。您还可以以相同的方式在数据库中存储任何 URI(包括 URL),并且使用data方案存储 URI实际上将存储资源本身(因为这就是dataURI 的工作方式)。您试图描述的是,通过调用获得的 URLURL.createObjectURL只能在特定的“会话”(取决于用户代理)内工作,使其在该会话之外毫无意义,例如,在发出将某些资源存储在数据库中的请求时。
2021-04-01 21:16:05
url.createObjectURL以某种方式只创建一个在该会话中工作的 URL,而不是用于存储在数据库中。FileReader()非常适合 base64 图像。
2021-04-02 21:16:05

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

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

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

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

现在我找到了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 上未启用剪贴板访问,请在此处解释另一方面,execCommand()只处理文本值并且不兼容 Firefox。

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

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

是否可以使用javascript从剪贴板数据中检索图像?
2021-03-16 21:16:05
你可以在 gmail 中完成,因此这是可能的。
2021-03-29 21:16:05
你不能。老实说,我还没有使用“禁用本机安全”设置进行测试,但据我搜索,没有办法做到这一点。
2021-04-10 21:16:05