Kéo và thả hình ảnh từ một trang web khác vào mỏ

Question

Tôi đã chạy tìm kiếm nhanh chóng và tìm kiếm tương tự nhưng không có câu hỏi nào được tạo ra và hầu hết đều cũ và bị bỏ qua (không có câu trả lời và không có nhận xét nào trong một thời gian). Vì vậy, ở đây ...

Tôi muốn có thể thu thập url (chỉ url) của hình ảnh bị rơi vào trang web của tôi từ một trang web khác .. (nghĩa là tôi có hai cửa sổ chrome mở. ứng dụng trong đó. Cửa sổ B đã imgur trong đó. Tôi mở một hình ảnh nhấp và kéo nó vào cửa sổ của tôi và buông bỏ. Bây giờ tôi cần phải biết url của hình ảnh được thả trên trang của tôi).

Đây là mã tôi đang làm việc với các tệp cục bộ.

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

Một lần nữa tôi không muốn tải lên bất cứ điều gì .. tôi không cố gắng làm bất cứ điều gì lạ mắt ... Tôi chỉ cần biết vị trí của hình ảnh bị rơi trên trang từ một trang web khác.

Answer 1

Hãy thử điều này: 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); 
    }); 
});​ 

tôi nhận được "http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342" Khi tôi kéo hình ảnh từ một cửa sổ trình duyệt.

.getAsString mất một callback mà được url như là đối số lần nó được gọi là

Không hoạt động trên firefox

Answer 2

Bạn có thể sử dụng này

$(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; 
}) 

Answer 3

Dựa trên câu trả lời Yunus, điều này dường như làm việc trong FF:

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