HTML5 - Glissez et déposez un JPEG du navigateur au navigateur

Question

J'ai vu de nombreux exemples comment réaliser glisser & déposer un JPEG de bureau dans mon navigateur. Dernièrement, j'ai entendu dire qu'il est également possible de faire glisser un fichier JPEG d'un autre site HTML vers mon navigateur et de charger le fichier JPEG. Comment puis-je réaliser cela?

a-t-il quelque chose à voir avec:

void addElement(
    in Element element 
); 

Answer 1

Si vous utilisez Jquery, vous pouvez trouver un moyen ici: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

est ici le code pour le faire:

<script src="https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js"></script> 
<script> 
$(document).bind('drop dragover', function (e) { 
    // Prevent the default browser drop action: 
    e.preventDefault(); 
}); 
$(document).bind('drop', function (e) { 
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src'); 
    if (url) { 
     $.getImageData({ 
      url: url, 
      success: function (img) { 
       var canvas = document.createElement('canvas'); 
     canvas.width = img.width; 
     canvas.height = img.height; 
       if (canvas.getContext && canvas.toBlob) { 
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 
        canvas.toBlob(function (blob) { 
         $('#fileupload').fileupload('add', {files: [blob]}); 
        }, "image/jpeg"); 
       } 
      } 
     }); 
    } 
}); 
</script>