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

Question

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

简单input[type=file]字段不响应页面元素。我尝试了dropzone.js，它与本地文件完美配合，但不适用于页面图像（它会响应，但chrome不会在＆＃34; drop＆＃34;事件中传递正确的图像对象。）

也许有一些众所周知的方法可以做到这一点？还是现有的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);
});