перетащите изображение из одного окна в другое / HTML5 - PullRequest
Новая
       17

перетащите изображение из одного окна в другое / HTML5

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

Цель

Поддержка перетаскивания из файловой системы и другого окна браузера, в котором результаты публикуются в виде вложенного файла независимо от источника, аналогично тому, что происходит ниже (который поддерживает толькоперетаскивание файловой системы через dropzone.js) Мне бы очень хотелось сохранить текущий API.

Моя текущая линия атаки - получить URL-адрес перетаскиваемого изображения, HTTP Получить изображениеи используйте существующий API Dropzone для обработки остальной части процесса (создания эскиза, загрузки файла, обработки ошибок при загрузке и т. д.). Тем не менее, я не полностью заблокирован в Dropzone.

В настоящее время работает

Изначально я реализовал перетаскивание изображений из локальной файловой системы, используя DropZone .Вот урезанная версия текущей реализации: 

Dropzone.options.pictureDrop = {
  paramName: 'picture[image]',
  maxFilesize: 9.6, // MB
}
<!DOCTYPE html>

<meta charset="utf-8">

<title>Dropzone simple example</title>

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

<!-- Change /upload-target to your upload address -->
<form action="/upload-target" class="dropzone" id="pictureDrop"></form>

Новое требование

У меня есть новое требование перетаскивать изображения с одного веб-сайта на другой.Похоже, что это не широко поддерживается, конечно, не в Dropzone.Тем не менее, рассматриваемые пользователи довольно настойчиво нуждаются в этом.

Я могу изменить DropZone следующим образом, чтобы получить URL входящего изображения, если оно есть: 

// getAString and it's DataTransferItem parent are defined here:
// https://www.w3.org/TR/html51/editing.html#the-datatransferitem-interface
//
// The getAsString interface is DUMB. It's async
// and accepts a callback but does not return a promise, nor
// does it have a failure callback. So with the help of #javascript on
// freenode, I created these wrappers:

function getMyString(datum)
{
  let promise = new Promise(function(resolve, reject)
  {
    // if readonly mode, we should reject() per the spec. But I
    // couldn't figure out how to determine the 'mode'. May
    // need the parent.

    if(datum.kind !== 'string')
      reject();

    else
    {
      // We can't seem to test for 'readonly mode' and don't know about other
      // failures, so we still need a timeout to reject.

      let rejection = reject;
      // TODO: prevent situation where failsafe fires and then success fires.
      let failsafe = setTimeout(function(){console.log('timeout reject from getMyString'); rejection()}, 1000);
      let success = function(url) {clearTimeout(failsafe); resolve(url); }

      datum.getAsString(success);
    }
  });

  return promise
}

function getImageURL(items) {
  const urlList = Array.from(items).find(i => (i.kind == 'string') && (i.type == 'text/uri-list'))

  if (urlList)
  {
    return getMyString(urlList);
  } else {
    return Promise.resolve();
  }
}



function receiveImage(url)
{
  target = document.getElementById('pictureDrop');
  let img = document.createElement('img');
  img['src'] = url;

  target.appendChild(img);
}

function noteFailure()
{
  console.log('Nope');
}


Dropzone.options.pictureDrop = {
  paramName: 'picture[image]',
  maxFilesize: 9.6, // MB
  init: function()
  {
    this.on('drop', function(ev)
    {
      let data = ev.dataTransfer.items;
      getImageURL(data).then(receiveImage, noteFailure);
    })
  }
}
<!DOCTYPE html>



Dropzone simple example



Open this URL in another window: https://i.pinimg.com/originals/a9/fd/37/a9fd378c3f8963fbd46fc36431b0123e.jpg
и перетащите это изображение сюда.

Теперь у меня есть URL изображения.Я хочу как-то интегрировать это с DropZone (который будет рисовать миниатюру и элементы управления, и уже настроен на загрузить файл .) Я думаю, что я хочу вызвать addFile (файл) но я не уверен ... отчасти потому, что я не вижу скрытого_файла , упомянутого в соответствующем коде .

Так вот в чем вопрос.Как мне взять этот URL, превратить его в приемлемый «Файл» и заставить Dropzone обработать его?

...