使用 JavaScript 从剪贴板粘贴图像

发布于 2024-10-06 22:35:17 字数 119 浏览 8 评论 0 原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蝶舞 2024-10-13 22:35:17

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

如何粘贴剪贴板中的图像功能可以在 Gmail 和 Google Chrome 12+ 中使用吗？

回复收藏 0 原文

孤千羽 2024-10-13 22:35:17

为了帮助其他人，我将在此处留下 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+ 中的剪贴板粘贴图像功能如何工作？

To help others, I'll leave the link here with the answer made by 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+?

回复收藏 0 原文

太阳哥哥 2024-10-13 22:35:17

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

以 imgur.com、onpaste 和 Pasteboard.co 为例，并查看 github 上的粘贴板代码以及 Joel 在他的博客上写的精彩文章

根据记录，您需要用户在您的元素上按 Ctrl+V，然后您可以通过读取 event.clipboardData< 来捕获 paste 事件处理程序中的数据。 /code> 但要使其在下层工作，您需要确保焦点位于空的 contenteditable 元素上，并从那里提取结果，这在 Firefox 22 中效果不佳。请参阅这里< /a>

回复收藏 0 原文

一束光，穿透我孤独的魂 2024-10-13 22:35:17

新的浏览器（例如 Firefox 4）支持将剪贴板中的图像数据粘贴到 RTE 中，作为带有编码 PNG 的数据 URI数据。然而，大多数 Web 应用程序会错误地解析这些数据 URI 并将其丢弃。雅虎邮件处理得当。然而 Gmail 和 Hotmail 放弃了它。我已就此通知谷歌和微软。

回复收藏 0 原文

撧情箌佬 2024-10-13 22:35:17

现在我找到了 clipboardData 对象。

但它仅从剪贴板检索文本格式或 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 代码或拖放它。

For now i found the clipboardData Object .

But it retrieve only text format or URL from clipboard.
clipboardData is IE only, it works with character string and return null if we paste an image.

a test example

 <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>

By default clipboard access is not enabled on firefox, explanation here.
On the other way, execCommand() only process text values and is not Firefox compliant.

Like the others said, the fact that code works on IE is a security risk, any site can access your clipboard text.

The easiest way to copy images relative URL is to use a java applet, windows activeX plugin, .net code or drag and drop it.

回复收藏 0 原文