Wednesday 10 March 2021

Get drag and drop image from another tab as base64String

With this code, I get only the URL. So I have to call this URL to restore the image.

Is it possible to get the image data itself directly without calling this URL again?

That's to avoid CORS depending on some server.

var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);

function noopHandler(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function drop(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  var imageUrl = evt.dataTransfer.getData('URL');
  console.log(imageUrl)
  alert(imageUrl);
}
#dropbox {
  border: solid 1px red;
  width: 200px;
  height: 200px;
}
<div>Drag this image to the drop zone:</div>

<img src="http://www.google.com/logos/2012/Julia_Child-2012-hp.jpg" alt="" />

<div id="dropbox">
  DropZone => you could drop any image from any page here
</div>


from Get drag and drop image from another tab as base64String

No comments:

Post a Comment