Is there any good way to drag and drop an image form a web page in another domain into my web page and then do some processing on the data?
I have tried a variety of methods, but every method I try seems to run into cross-origin related restrictions.
I can understand say, not running scripts from foreign servers.
But given the following I don't see how inspecting the image data poses any additional security concern.
So if I can already do all those things, how is it a security concern for my script to read the color data from the image? What bad things can possibly happen if I find out the color of a pixel at coordinate (55, 73) is red? What possible security attacks could result?
No, I don't think there is a way to do it with javascript.
On this point:
The user can already right click and save the image if they want, and after saving it, drop it into my web page and do the same processing. I just want to save them the step.
you could do automatically download that image to your server and process the image on it.
Create a dropzone element (I used a element but you can create a different element):
<main></main>
<script>
const dropzone = document.querySelector('main');
</script>
Give the dropzone a dashed border style:
<style>
main {
border: 1px border lightgray;
width: 100px;
height: 100px;
}
</style>
Highlight the dropzone when the dragenter event is fired (image is dragged over the dropzone):
<style>
.active {
border: 1px dashed black;
}
</style>
<script>
// ...
dropzone.addEventListener('dragenter', event => {
event.preventDefault();
dropzone.classList.add('active');
});
event.preventDefault() is necessary or else the image will be opened from your local file explorer.
Remove the dropzone highlight when the dragleave event is fired (image is no longer dragged over the dropzone):
<script>
// ...
dropzone.addEventListener('dragleave', event => {
event.preventDefault();
dropzone.classList.remove('active');
});
</script>
It’s necessary to handle the dragover event before drop happens:
<script>
// ...
dropzone.addEventListener('dragover', event => {
event.preventDefault();
});
</script>
Now handle the drop event (when the image is released inside the dropzone):
<script>
// ...
dropzone.addEventListener('drop', event => {
event.preventDefault();
dropzone.classList.remove('active');
const file = event.dataTransfer.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('loadend', () => {
const img = document.createElement('img');
img.src = reader.result;
dropzone.append(img);
});
});
</script>