如何在 JavaScript 中获取浏览器复制图像的实际 URL

Question

好的，例如，当我们在 Firefox 中对图像（不是图像位置）执行“复制图像”时，数据被复制到剪贴板。如果我们粘贴到一个可编辑的 <div> 并输出那个 <div> 的 HTML，我们可以看到它是图像的实际 URL 而不是 base64 [=24] =] 或某个对象 URL。例如，如果我们将其粘贴到 Paint 中，我们将获得实际图像。 URL 是否嵌入了剪贴板数据中的某处？如果是这样，我们如何在粘贴时检索它？

这是调用粘贴事件的代码：

let cd = (event.clipboardData || event.originalEvent.clipboardData);

for (item of cd.items) {
    if (item.type.indexOf("image") >= 0) {
            ..... get the URL value ....

        break;
    }
}

Answer 1

您可以使用 DataTransfer 对象的 getData 方法通过 text/html 数据类型访问标记数据。
然后你只需要 parse that markup 并搜索 <img> 的 src.

target.onpaste = (e) => {
  const dT = e.clipboardData || window.clipboardData;
  const html = dT.getData('text/html') || "";
  const parsed = new DOMParser().parseFromString(html, 'text/html');
  const img = parsed.querySelector('img');
  if( !img ) { console.warn('no image here'); return; }
  const url = img.src;
  console.log(url);
};

#target { border: 1px solid }

<p><img id="img" src="https://cdn.sstatic.net/Sites/Whosebug/img/apple-touch-icon.png">copy this image by right-click + "Copy Image"</p>
<div contenteditable id="target">Then paste here</div>

Answer 2

这似乎在 Firefox 中提供了 url：

"use strict";
window.addEventListener("paste", e=> {
    let cd = e.clipboardData;
    if( cd.items.length == 2) {
       cd.items[0].getAsString( parseFragment) 
    }

    function parseFragment( html) {
        let url = "";
        html.replace( /src\s*=\s*"(.*)"/, (match, p0) => (url = p0) )
        console.log( url);
    }
});

<div contentEditable style="border:thick dotted red; height: 100px; width: 200px">
</div>

不过

代码是通过反复试验和挠头得出的：

粘贴事件生成一个项目对象，它是一个 DataTransferList 对象，它是 DataTransferItem 个对象的列表。
DataTransferItem 对象有一个 getAsString 回调方法
为 Firefox 中的图像粘贴操作在两个 DataTransferItem 对象中的第一个对象上请求的回调收到 html 片段字符串。
获取字符串中 <img> 标记的 src 属性的正则表达式是 基本的 - 它只是查找双引号字符串。

所以我想说这至少是可能的，但并没有声称上面的代码是健壮的。

确定 Firefox 处理图像数据帖子的方式是否包含在标准中或是否适用于其他浏览器需要更多研究。我个人发现在查看发布的图像数据时没有找到查找信息的标准方法。

如何在 JavaScript 中获取浏览器复制图像的实际 URL

How to get the actual URL of a browser copied image in JavaScript

javascript

url

image

paste