Как обрабатывать события перетаскивания с помощью «полуизображения» URL («изображения» с других сайтов) - PullRequest
Новая
       22

Как обрабатывать события перетаскивания с помощью «полуизображения» URL («изображения» с других сайтов)

0 голосов
/ 06 сентября 2018

Что я подразумеваю под полуизображением ? (если у вас есть лучшая формулировка - предложения приветствуются)

Ну, в качестве примера - зайдите в Google Images (то же самое и для многих других веб-сайтов) и поищите "cat". Перетаскивание первого элемента в мою область для удаления дает только один URL, который, к примеру, не является одним из изображений. https://www.google.com/imgres?imgurl=https%3A%2F%2Fr.hswstatic.com%2Fw_907%2Fgif%2Ftesla-cat.jpg&imgrefurl=https%3A%2F%2Fanimals.howstuffworks.com%2Fpets%2Fteslas-cat-and-other-feline-fascinations.htm&docid=yTPSYBCDHgIU0M&tbnid=GTJT8CqjTKEtwM%3A&vet=10ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA..i&w=907&h=510&bih=937&biw=1855&q=Cat&ved=0ahUKEwiYtpzaiKbdAhUytosKHSXeC4AQMwjhASgAMAA&iact=mrc&uact=8

Такого рода URL-адрес "не просто изображения" встречается на многих различных веб-сайтах. Google Images был всего лишь примером (в большинстве случаев это фактически файл изображения, и все работает нормально). В частности, в обработчике события отбрасывания 

event.dataTransfer.getData("URL");

дает такой тип URL, а 

event.dataTransfer.files

- это просто пустой список для этого события.

Теперь, помните, что на самом деле пользователь видел, что изображение было сброшено на область, которую можно опустить, так что если это не сработает с чем-то, что должно принимать изображения, это будет разочаровывающим опытом для пользователя. Когда я помещаю такие полуизображения (с любого веб-сайта) в область вывода изображений Google, все работает нормально, поэтому должен быть способ.

У меня вопрос: как мне обрабатывать подобные события и создавать из них объект Blob / a File?

1 Ответ

0 голосов
/ 09 сентября 2018

Если вам нужно загрузить изображение, перетаскиваемое в область сброса, лучший способ сделать это - отправить URL-адрес на бэкэнд и загрузить его оттуда (подходит любая бэкэнд-технология).

Выполнив быстрый поиск в Google, вы сможете найти несколько похожих работ: [1] , [2] и [3] .

Вот небольшой пример кода, показывающий, как это будет работать на стороне JavaScript: 

// Get raw HTML from dropped element
var droppedHTML = evt.dataTransfer.getData('text/html');

// Assuming that the dropped element is an image, get the "src" attribute (URL)
var dropContext = $('<div>').append(droppedHTML);
var imgUrl = $(dropContext).find('img').attr('src');

// Now you can call your API via AJAX or some other way
$.post('analyze_image.php',
    {
        imgUrl: imgUrl,
    },
    function(response, status) {
        // Feedback on response
    }
);

Затем, в вашем бэкэнде, если у вас есть PHP-сервер, вы можете скачать с него, как показано в этом потоке переполнения стека : 

file_put_contents($imagePath, fopen($imgUrl, 'r'));
...