В любом случае существует функция перетаскивания HTML5 или/или API файлов для перетаскивания jpg-изображения из одного окна в другое?
Идея состоит в том, что я мог бы перетащить и изображение из Facebook в другое окно браузера с помощью специального HTML, который получит это изображение.
Или, по крайней мере, способ перетащить с рабочего стола на браузер?
Спасибо большое
Не уверен, что между окнами, но, конечно, с рабочего стола:
http://studio.html5rocks.com/#Photos
Собственно, ознакомьтесь с полным html5rocks.com для идей.
EDIT:
Я только открыл эту демонстрацию в двух отдельных окнах браузера, и я могу перетащить из одного окна в другое. Я также смог перетащить эскиз из Facebook и перетащить его в зону выпадения.
Однако изображение Facebook было отброшено как "неизвестное". Таким образом, похоже, что вы можете переходить с одного сайта на другой, но я не уверен, что именно действительно отбрасывается. Если вы перетаскиваете Facebook или такие, Facebook может потребоваться, чтобы изображения или элементы имели набор свойств draggable или что-то еще, что ваше приложение может читать.
Итог заключается в том, что вы должны быть способны заставить его работать между приложениями, которыми вы управляете. Но если вы пытаетесь интегрировать его с внешними приложениями, вам нужно будет провести некоторое экспериментирование, чтобы узнать, что именно передается во время перетаскивания. Я сам не проделал эту работу, но это не должно быть сложно.
Если вы используете jQuery, вы можете посмотреть на это: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page
На странице about:
Он работает, отправив запрос JSONP с URL-адресом изображения на серверы Google с помощью Google App Engine1. Затем сервер преобразует изображение в URL-адрес данных с кодировкой base64 и отправляет изображение обратно как объект JSON. Это означает, что изображение может быть локально включено на веб-сайт, и поэтому его можно редактировать с помощью тега canvas.
Я еще не пробовал, но скоро посмотрю!
Это старый, но с тех пор, как я недавно побеспокоился об этом, и есть нечто большее, чем вы могли бы подумать, я ввел ответ. В качестве введения, чтобы узнать о собственных методах, обратитесь к этот сайт.
Это дойдет до вас. Когда дело доходит до перетаскивания между окнами, все становится вонючим. Проблема в том, что в очередной раз не так много согласованности между браузерами. Откройте кучу разных браузеров, а затем откройте этот отличный пример. Выберите первый переключатель getData('Text') и проверьте перетаскивание изображений. Первое, что вы заметите, это то, что в некоторых случаях getData ('Text') содержит URL-адрес, но не URL-адрес изображения. Итак, теперь выберите переключатель getData(e.dataTransfer.types[0]) based on detected content type. Вы заметите, в зависимости от того, какой браузер вы выбираете, какие типы содержат URL-адрес изображения, но каждый браузер имеет разные типы. На момент написания этой статьи некоторые браузеры (Internet Explorer) не имеют типов, имеющих URL-адрес изображения. Вот почему, если вы открываете изображения Google в Internet Explorer и пытаетесь выполнить этот фанк-поиск изображений с перетаскиванием, ничего не происходит - окно "drop here" не появляется.
Итак, лучшее, что я придумал, (убедитесь, что вы ссылаетесь на эти ссылки выше, иначе вы не будете знать, о чем я говорю): -
e.dataTransfer.files. Если есть файлы, все хорошо. Это, скорее всего, падение с локального компьютера. Если нет, перейдите к шагу 2.Прокрутитесь через getData(e.dataTransfer.types[0]) и передайте URL-адрес регулярному выражению, которое проверяет строку, содержащую URL-адрес изображения. Что-то вроде:
RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
Если вы найдете совпадение, тогда все хорошо. Делайте все, что хотите, например, переходите на сервер, чтобы получить изображение. Если нет, перейдите к шагу 3.
getData('Text'). Если вы найдете матч, то хорошо. Перейдите на сервер и т.д. Если нет, перейдите к шагу 4.* получение URL-адреса от перетаскиваемого изображения, 100% -ого для Firefox и хром *
$('#element').bind('drop', function (e) {
alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});
Я знаю, что вы можете очень легко получить URL-адрес изображения, которое было перетащено: myDataTransfer.getData( "Текст" )
но до сих пор мне не удалось найти способ получить базовые данные изображения, не нарушая при этом защиту междоменной безопасности javascript... вы не можете получить изображение с помощью ajax, и вы не можете использовать холст как посредник.
К сожалению, похоже, что в большинстве случаев само перетаскивание (то есть объект dataTransfer) не содержит данных изображения. Я говорю "большинство случаев", потому что перетаскивания из одного и того же браузера нет, но когда я перетащил из окна Firefox в окно Chrome, он, похоже, включил какое-то растровое изображение, но в каком-то необычном формате (возможно, Windows).
Единственная вещь, на которую нужно обратить внимание, - это функции, специфичные для браузера, такие как "application/x-moz-nativeimage", но я не вижу никакого подобного свойства, связанного с объектом dataTransfer в Chrome.
Вот пример перетаскивания файла с помощью HTML5. Кажется, что это не работает из одного окна браузера в другое (работает Desktop- > browser). Но вы можете использовать это как ссылку.
Это эксперимент с использованием идентификатора веб для создания формы HTML5.
http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/
В Chrome вы можете использовать Copy/Paste, вам нужно скопировать изображение, щелкнув правой кнопкой мыши и выбрав "Копировать изображение", затем вы можете вставить его на другую страницу, которая обрабатывает события вставки с помощью Ctrl + V.
Вот демонстрационная иллюстрация, иллюстрирующая принцип: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/