javascript - 使页面上的所有图像都可拖动到特殊的上传字段

Question

我正在尝试编写一个浏览器扩展程序，允许用户将图片从页面保存到收藏夹(例如 pinterest，您知道)。通过单击扩展图标，它会向 html 添加一个特殊字段，用户可以将任何图像从页面拖到它。然后将图像上传到服务器(最好是作为文件，但来自 src="..." 的简单 url 也可能有用)。请参见下面的示例。

简单的input[type=file] 字段不响应页面元素。我试过dropzone.js ，它可以完美地处理本地文件，但不能处理页面图像(它会响应，但 chrome 不会在“drop”事件中传递正确的图像对象)。

也许有一些众所周知的方法可以做到这一点？还是现有的 JavaScript 库？我真的不想修改外国页面代码，它可能会惹恼用户(例如使用沉重的 jQuery UI 并使所有 img 标签可拖动)。自然的拖放行为是最理想的。

Answer 1

我找到了简单而漂亮的解决方案。将 onmousedown 事件监听器附加到页面上的每个 img 标记，将 URL 保存到临时变量并在 ondrop 事件在上传字段上触发时读取它。

简化示例:

var imgURL = "";

$("a, img").on("mousedown", function(e) {
    var $target = $(e.target);
    if ($target.prop("tagName").toLowerCase() == 'img') {
        imgURL = $target.attr('src');
    }
});

$("#my-drop-area").on("dragenter dragover dragleave", function(e) {
    // need for proper ondrop event activation
    e.preventDefault();
    e.stopPropagation();
}).on("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.debug("Dropped! URL:", imgURL);
});