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

【问题标题】：How to get the actual URL of a browser copied image in JavaScript如何在 JavaScript 中获取浏览器复制图像的实际 URL
【发布时间】：2020-05-31 06:39:31
【问题描述】：

好的，例如，当我们在 Firefox 中对图像（不是图像位置）执行“复制图像”时，数据将复制到剪贴板。如果我们粘贴到可编辑的 <div> 并输出该 <div> 的 HTML，我们可以看到它是图像的实际 URL，而不是 base64 URL 或某个对象 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;
    }
}

【问题讨论】：

cd 给你什么？
cd 只是为了确保一些跨浏览器支持并设置工作的剪贴板数据对象。

标签： javascript image url paste

【解决方案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/stackoverflow/img/apple-touch-icon.png">copy this image by right-click + "Copy Image"</p>
<div contenteditable id="target">Then paste here</div>

【讨论】：

hmmm.. 结果是这样的：image.png 2898 �PNG 你实际上得到了 src 属性中显示的 URL？
@NyaNguyen 对不起，我不知道我怎么会误读你的问题，我不知何故虽然你想访问文件...编辑，现在这实际上是一个更容易的任务。跨度>
@Kaiido 感谢您以更直接的方式解释如何做到这一点 - 我不需要为了任何好的目的改进我的正则表达式。我更关心的是，Chrome 和 Firefox 都暴露了用户的本地文件系统路径，用户“复制图像”是他们拖到空浏览器选项卡中查看的文件。肯定是一个边缘案例，但是关于将其报告为安全问题的任何想法？
@traktor53 他们只在这种情况下提供对 url 的访问权限，无法读取该地址的内容，所以我认为它不能被视为安全风险。
您可以随意处理复选标记。请注意，正如他们所说，他们的答案不是防弹的（根本）。例如粘贴src="hello world" 会让它认为有东西。

【解决方案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 处理图像数据帖子的方式是否包含在标准中或适用于其他浏览器，需要进行更多研究。我个人在查看发布的图像数据时发现没有标准化的方法来查找有关发布的图像数据的信息。

【讨论】：