如何使用“半图像”URL（来自其他网站的“图像”）处理丢弃事件

Posted 2021-05-03

半图像是什么意思？ （如果你有更好的措辞 - 欢迎提出建议）

好吧，作为一个例子 - 去谷歌图像（它也适用于许多其他网站）并搜索“猫”。将第一个项目拖放到我的可放置区域只会给出一个不完全是图像的URL，例如-https://www.google.com/imgres?imgurl=https%3A%2F%2Fr.hswstatic.com%2Fw_907%2Fgif%2Ftesla-cat.jpg&imgrefurl=https%3A%2F%2Fanimals.howstuffworks.com%2Fpets%2Fteslas-cat-and-other-feline-fascinations.htm&docid=yTPSYBCDHgIU0M&tbnid=GTJT8CqjTKEtwM%3A&vet=10ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA..i&w=907&h=510&bih=937&biw=1855&q=Cat&ved=0ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA&iact=mrc&uact=8

对于许多不同的网站来说，这种“不仅仅是一个图像”的网址就出现了 - 谷歌图片只是一个例子（大多数时候它实际上是一个图像文件，一切正常）。更具体地说，在drop事件处理程序中，

event.dataTransfer.getData("URL");

给出那种网址，并且

event.dataTransfer.files

只是该事件的空列表。

现在，请记住，用户实际看到的是一个图像被丢弃到可放置区域 - 所以如果这对于应该接受图像的东西不起作用，那对用户来说将是令人沮丧的体验。当我将这些半图像（从任何网站）放到谷歌图像可放置区域时，一切都运行正常，所以必须有办法。

我的问题是 - 如何处理这类事件并从中生成Blob / a文件对象？

答案

如果您需要下载拖入可放置区域的图像，最好的方法是将URL发送到后端并从那里下载（任何后端技术都适用）。

通过快速谷歌搜索，你可以找到一些相关的工作：[1]，[2]和[3]。

这是一个小代码示例，展示了如何在javascript方面工作：

// Get raw html from dropped element
var droppedHTML = evt.dataTransfer.getData('text/html');

// Assuming that the dropped element is an image, get the "src" attribute (URL)
var dropContext = $('<div>').append(droppedHTML);
var imgUrl = $(dropContext).find('img').attr('src');

// Now you can call your API via AJAX or some other way
$.post('analyze_image.php',
    {
        imgUrl: imgUrl,
    },
    function(response, status) {
        // Feedback on response
    }
);

然后，在你的后端，假设你有一个PHP服务器，你可以从那里下载，如this Stack Overflow thread所示：

file_put_contents($imagePath, fopen($imgUrl, 'r'));