Question

半图像是什么意思？（如果您的措辞更好，我们欢迎您提出建议）

例如，转到Google图片（许多其他网站也是如此）并搜索“猫”。将第一项拖放到我的可放置区域中，只会得到一个与图片不完全相同的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

在许多不同的网站上都会出现这种“不仅仅是图像”网址-Google图像只是一个例子（大多数情况下，它实际上是图像文件，并且一切正常。）更具体地说，在放置事件处理程序内，

event.dataTransfer.getData("URL");

提供这种网址，并且

event.dataTransfer.files

只是该事件的空白列表。

现在，请记住，用户实际看到的是一幅图像被拖放到可放置区域上，因此，如果该图像不能在应该接受图像的物体上工作，那将给用户带来沮丧的体验。当我将这些半图像（从任何网站上）放置到Google图片可投放区域时，一切都正常，因此必须有一种方法。

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

Answer 1

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

通过快速Google搜索，您可以找到一些相关的工作：[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'));

如何使用“半图片” URL（来自其他网站的“图片”）处理放置事件

1 个答案: