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

问题描述 投票:0回答:1

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

好吧,作为一个例子 - 去谷歌图像(它也适用于许多其他网站)并搜索“猫”。将第一个项目拖放到我的可放置区域只会给出一个不完全是图像的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文件对象?

javascript html html5 javascript-events drag-and-drop
1个回答
1
投票

如果您需要下载拖入可放置区域的图像,最好的方法是将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'));
© www.soinside.com 2019 - 2024. All rights reserved.