从另一个网站拖放图像到我的

Posted 2023-05-08

【中文标题】从另一个网站拖放图像到我的

【英文标题】：Drag and Drop images from another website to mine

【发布时间】：2012-06-28 04:01:18

【问题描述】：

我进行了一次快速的 google 和 SO 搜索，发现了类似的问题，但没有一个是正确的，而且大多数都是旧的并且看起来被遗弃（没有答案，并且有一段时间没有 cmets）。所以就到这里了……

我希望能够收集从另一个网站拖放到我的网站上的图像的 url（仅 url）..（即我打开了两个 chrome 窗口。窗口 A 中有我的应用程序。窗口 B 有imgur 在其中。我打开一个图像单击并将其拖动到我的窗口并松开。现在我需要知道放置在我的页面上的图像的 url）。

这是我用于本地文件的代码。

$(document).on('drop', function(e) 
    var data = e.dataTransfer || e.originalEvent.dataTransfer;
    console.log(data); // data.files is empty
    e.preventDefault();
    return false;
);​

再次，我不想上传任何东西..我不想做任何花哨的事情...我只需要知道从另一个网站拖放到页面上的图像的位置。

【问题讨论】：

我认为问题是：如果网站没有使用 html5 拖放 API，当用户拖动图片时，浏览器给他的是纯数据，没有任何类型的元信息（如src，这是您所期望的）。

“运行 HTML5 拖放 API”是什么意思。至于你的其余评论，老实说，我认为你把整个事情搞糊涂了。

我在说这个：developer.mozilla.org/En/DragDrop/Drag_and_Drop（好吧，我错了。你确实在拖动图像时得到了 URL。我会在答案之前搜索一些东西）。

见***.com/a/19564982/746754。

【参考方案1】：

试试这个：http://jsfiddle.net/2Jet2/70/

$(document).on('dragover', function(e) 
     e.preventDefault();
);
$(document).on('drop', function(e) 
    e.preventDefault();
    e.originalEvent.dataTransfer.items[0].getAsString(function(url)
        alert(url);
    );
);​

当我从另一个浏览器窗口拖动该图像时，我得到"http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342"。

.getAsString 接受一个回调，一旦它被调用，它就会获取 url 作为参数

无法在火狐上运行

【参考方案2】：

你可以用这个

$(document).bind('drop', function (e)         
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src');
    if (url) 
        jQuery('<img/>', 
            src: url,
            alt: "resim"
        ).appendTo('#yourId');            
    
    return false;
)

【讨论】：

e.originalEvent.dataTransfer.getData 可能无法使用您的浏览器，因为操作系统不受影响。

【参考方案3】：

根据尤努斯的回答，这似乎适用于 FF：

e.originalEvent.dataTransfer.getData('text/html').match(/src\s*=\s*"(.+?)"/)[1]

【讨论】：

在 chrome 中测试但不起作用。一切都很好，直到：e.originalEvent.dataTransfer.getData('text/html')，该值显示在控制台上但不能用作字符串。

我在 chrome v30.0 和 firefox v24.0 上工作，谢谢；-) 你在哪里找到这个技巧的？ :-)

很高兴知道它现在可以在 Chrome 上运行。 @m1uan：我是根据尤努斯的建议完成的。