¿Hay alguna buena manera de arrastrar y soltar una imagen desde una página web en otro dominio en mi página web y luego procesar los datos?
He probado una variedad de métodos, pero cada método que pruebo parece tener restricciones relacionadas con el origen cruzado.
Puedo entender decir, no ejecutar scripts desde servidores extranjeros.
Pero dado lo siguiente, no veo cómo la inspección de los datos de la imagen plantea un problema de seguridad adicional.
Entonces, si ya puedo hacer todas esas cosas, ¿cómo es un problema de seguridad que mi secuencia de comandos lea los datos de color de la imagen? ¿Qué cosas malas pueden suceder si descubro que el color de un píxel en la coordenada (55, 73) es rojo? ¿Qué posibles ataques de seguridad podrían resultar?
No, no creo que haya una manera de hacerlo con javascript.
En este punto:
El usuario ya puede hacer clic con el botón derecho y guardar la imagen si lo desea y, después de guardarla, colocarla en mi página web y realizar el mismo procesamiento. Sólo quiero ahorrarles el paso.
podría descargar automáticamente esa imagen a su servidor y procesar la imagen en él.
Cree un elemento de zona de caída (utilicé un elemento pero puede crear un elemento diferente):
<main></main> <script> const dropzone = document.querySelector('main'); </script>Dale a la zona de caída un estilo de borde discontinuo:
<style> main { border: 1px border lightgray; width: 100px; height: 100px; } </style>Resalte la zona de colocación cuando se activa el evento dragenter (la imagen se arrastra sobre la zona de colocación):
<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 .
Elimine el resaltado de la zona de colocación cuando se activa el evento dragleave (la imagen ya no se arrastra sobre la zona de colocación):
<script> // ... dropzone.addEventListener('dragleave', event => { event.preventDefault(); dropzone.classList.remove('active'); }); </script>Es necesario manejar el evento de arrastre antes de que ocurra la caída:
<script> // ... dropzone.addEventListener('dragover', event => { event.preventDefault(); }); </script>Ahora maneje el evento de caída (cuando la imagen se libera dentro de la zona de caída):
<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>