Trascinare e rilasciare immagini da un altro sito Web per estrarre

Question

Ho eseguito una rapida ricerca su google e SO e ho trovato domande simili, ma nessuna era ben formata e la maggior parte erano vecchie e sembravano abbandonate (nessuna risposta e nessun commento per un po '). Quindi ecco qui ...

Voglio essere in grado di raccogliere l'url (solo l'url) di un'immagine che viene rilasciata sul mio sito da un altro sito .. (cioè ho due finestre cromate aperte. applicazione in esso. La finestra B ha imgur in esso. Apro un'immagine clic e la trascino alla mia finestra e lascia andare. Ora ho bisogno di sapere l'url dell'immagine sceso sulla mia pagina).

Ecco il codice con cui stavo lavorando per i file locali.

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

Anche in questo caso non voglio caricare niente .. io non sto cercando di fare qualcosa di fantasia ... Ho solo bisogno di conoscere la posizione delle immagini che è caduto sulla pagina da un altro sito.

Answer 1

provate questo: 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); 
    }); 
});​ 

ottengo "http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342" Quando ho trascinato l'immagine da un'altra finestra del browser.

.getAsString prende una callback che ottiene l'URL come argomento una volta che è chiamato

Non funziona su Firefox

Answer 2

È possibile utilizzare questo

$(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

Sulla base di risposta di Yunus, questo sembra lavoro in FF:

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