Как получить изображение из буфера обмена в JavaScript [dубликат]

вы также используете функцию preg_replace_callback . и эта функция идентична его сиблингу preg_replace , за исключением того, что она может принимать функцию обратного вызова, которая дает вам больше контроля над тем, как вы управляете своим выходом.

  $ str = "  это строка ";  echo preg_replace_callback ('/ \ s + /', function ($ matches) {return "";}, $ str);   
120
задан Josh Lee 13 June 2011 в 19:18
поделиться

6 ответов

Я провел некоторое время, экспериментируя с этим. Кажется, это похоже на новый API-интерфейс буфера обмена . Вы можете определить обработчик события «paste» и посмотреть на event.clipboardData.items и вызвать getAsFile () на них, чтобы получить Blob. Когда у вас есть Blob, вы можете использовать FileReader на нем, чтобы узнать, что в нем. Вот как вы можете получить URL-адрес данных для материала, который вы только что вставили в Chrome:

  // window.addEventListener ('paste', ... или document.onpaste = function (event)  {var items = (event.clipboardData || event.originalEvent.clipboardData) .items; console.log (JSON.stringify (items)); // предоставит вам типы mime для (индекс в элементах) {var item = items  [index]; if (item.kind === 'file') {var blob = item.getAsFile (); var reader = new FileReader (); reader.onload = function (event) {console.log (event.target  .result)}; // data url! reader.readAsDataURL (blob);}}}  

После того, как у вас есть URL-адрес данных, вы можете отобразить изображение на странице. загрузите его вместо этого, вы можете использовать readAsBinaryString, или вы можете поместить его в XHR, используя FormData .

180
ответ дан Nick Retallack 15 August 2018 в 15:57
поделиться
  • 1
    Сцепление на соломинках здесь, но любые идеи, почему event.clipboardData.items кажется «неопределенным» в Safari 5.1? Или даже как получить содержимое буфера обмена для файла / blob в Safari? Отлично работает в Chrome. Вы думаете, что webkit будет webkit :( – Gavin Gilmour 13 August 2011 в 01:03
  • 2
    @SenicaGonzalez, потому что данные существуют только на время события. После события оно исчезло, поэтому, когда вы пытаетесь открыть объект в инспекторе, вы ничего не увидите. – Nick Retallack 12 June 2012 в 09:38
  • 3
    Похоже, что он не работает в последнем Chrome (v25 +) – Alex 2 March 2013 в 17:57
  • 4
    Я запускаю это на Firefox и var blob = items [0] .getAsFile () throw TypeError: элементы не определены – chinna_82 23 July 2013 в 09:23
  • 5
    Не могли бы вы представить пример, как отправить XMLHttpRequest с данными этого изображения? Это было бы очень приятно: D – poitroae 4 August 2013 в 23:30

Вот плавный плагин jQuery, завершающий всю сделку (в основном те же самые принципы, что и ответ Ника ): http://strd6.com/2011/09/html5-javascript-pasting -image-data-in-chrome /

У этого есть живая демонстрация, аннотированный исходный код и все.

24
ответ дан Community 15 August 2018 в 15:57
поделиться

Ничего себе, это круто. Я еще не погрузился в источник gmail, чтобы понять его (я сделал это с помощью функции перетаскивания), но я предполагаю, что это расширение API перетаскивания, которое хром уже расширил. Есть достойная запись о том, как работает функция перетаскивания на рабочий стол: http://www.thecssninja.com/javascript/gmail-dragout , которая может по крайней мере указывать на вас в правильном направлении.

1
ответ дан Mark Kahn 15 August 2018 в 15:57
поделиться

Веб-браузеры продолжают идти вперед. Я недавно нашел это:

Фрагмент кода - Доступ к изображениям буфера обмена с помощью Javascript

и этого:

Пустота Пустоты (или, почему событие onPaste беспорядок)

Первая ссылка описывает способ получения изображений буфера обмена с использованием JavaScript только в Firefox и Chrome. Вторая ссылка содержит постскриптум, который упоминает, что тот же метод был адаптирован к IE (неизвестная версия).

6
ответ дан Rich Apodaca 15 August 2018 в 15:57
поделиться
  • 1
    Firefox даже не активирует Edit | Вставьте пункт меню для меня, поэтому я не вижу, как это работает в Firefox вообще. – podperson 10 March 2015 в 19:32

Ответ Nick, по-видимому, нуждается в небольших изменениях в работе:)

  // window.addEventListener ('paste', ... или document.onpaste = function (event) {  // используйте event.originalEvent.clipboard для новых версий chrome var items = (event.clipboardData || event.originalEvent.clipboardData) .items; console.log (JSON.stringify (items)); // предоставит вам типы mime  // найти вложенное изображение из вложенных элементов var blob = null; for (var i = 0; i & lt; items.length; i ++) {if (items [i] .type.indexOf ("image") === 0)  {blob = items [i] .getAsFile ();}} // загружать изображение, если есть вставленное изображение if (blob! == null) {var reader = new FileReader (); reader.onload = function (event) {  console.log (event.target.result); // data url!}; reader.readAsDataURL (blob);}}  

Пример кода: http: // jsfiddle .net / bt7BU / 225 /

Таким образом, изменения ответа на ники были:

  var items = event.clipboardData.items;  [  ! d13] 

to

  var items = (event.clipboardDa  ta ||  event.originalEvent.clipboardData) .Items;   

Также мне пришлось взять второй элемент из вставленных элементов (первый, кажется, текст / html, если вы копируете изображение с другой веб-страницы в буфер). Поэтому я изменил

  var blob = items [0] .getAsFile ();   

в петлю, в которой найден элемент, содержащий изображение (см. выше)

Я не знал, как ответить прямо на ответ Ника, надеюсь, что здесь хорошо: $:)

39
ответ дан robintibor 15 August 2018 в 15:57
поделиться
  • 1
    Как отправить данные изображения в формате XMLHttpRequest? – poitroae 4 August 2013 в 23:31
  • 2
    Для других, читающих это, ответ на этот вопрос можно включить туда сейчас: stackoverflow.com/questions/18055422/… :) – robintibor 13 August 2013 в 13:49
  • 3
    Я не понимаю. Когда я вставляю файлы в браузер, clipboardData.items всегда пуст в google chrome (работает Firefox). Хром теперь требует почти такой же оптимизации, как и IE. – Tomáš Zato 22 October 2014 в 23:54
  • 4
    Небольшое редактирование: if (blob! = Null) {(или установить blob = null при инициализации) – Pancakeo 27 November 2014 в 06:15
  • 5
    event.clipboardData.items работал отлично для меня в последнем Chrome, не уверен, когда event.originalEvent ... полезен? – Ruben Martinez Jr. 3 July 2017 в 21:08

Насколько я знаю -

Благодаря функциям HTML 5 (File Api и связанным) доступ к данным изображения в буфер обмена теперь возможен с помощью простого javascript.

Это, однако, не позволяет работа над IE (что-то меньшее, чем IE 10). Не слишком разбирайтесь в поддержке IE10.

Для IE optiens, которые, я считаю, являются «резервными» вариантами, либо используются AIR api Adobe, либо с помощью подписанного апплета

2
ответ дан saurshaz 15 August 2018 в 15:57
поделиться
Другие вопросы по тегам:

Похожие вопросы: