Вставьте изображение из буфера обмена с помощью JavaScript

Question

Как вставить изображение из буфера обмена в пользовательский редактор форматированного текста с помощью JavaScript? (Ctrl + C и Ctrl + V или снимок).

Кто-нибудь использовал расширенный текстовый редактор Ajax? Работает ли вставка изображения из буфера обмена в Ajax RTE?

Пожалуйста, поделитесь своими мыслями!

Спасибо!

Answer 1

Поскольку этот вопрос все еще часто появляется в результатах поиска Google, хочу отметить, что это возможно сегодня, , по крайней мере, в Google Chrome (2011) во всех современных браузерах (2018). Они внедрили его для использования в GMail, но он доступен для всех сайтов.

Как работает вставка изображения из буфера обмена в Gmail и Google Chrome 12+?

Answer 2

Теперь это возможно в Chrome и Firefox. Я не очень уверен насчет IE / Safari.

Посмотрите на imgur.com, onpaste и pasteboard.co в качестве примеров и посмотрите код для монтажа на github , а также Прекрасная статья Джоэла в его блоге

Для записи вам нужно, чтобы пользователь нажал Ctrl + V на вашем элементе, а затем вы можете захватить данные в обработчике событий paste , читая из event.clipboardData, но чтобы он работал вниз -уровень, вам нужно убедиться, что фокус находится на пустом элементе contenteditable , и извлекать результаты оттуда, что не очень хорошо работает в Firefox 22. См. здесь

Answer 3

Новые браузеры, такие как Firefox 4, поддерживают вставку данных изображения из буфера обмена в RTE как URI данных с закодированными данными PNG . Однако большинство веб-приложений неправильно анализируют эти URI данных и отбрасывают его. Почта Yahoo правильно обрабатывает. Однако Gmail и Hotmail отказываются от него. Я уведомил об этом Google и Microsoft.

Answer 4

На данный момент я нашел объект clipboardData .

Но он извлекает только текстовый формат или URL из буфера обмена. clipboardData только для IE, он работает со строкой символов и возвращает ноль, если мы вставляем изображение.

тестовый пример

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

По умолчанию доступ к буферу обмена не включен в Firefox, объяснение здесь . С другой стороны, execCommand () обрабатывает только текстовые значения и не поддерживает Firefox.

Как уже говорили другие, тот факт, что код работает в IE, представляет угрозу безопасности, любой сайт может получить доступ к вашему тексту буфера обмена.

Самый простой способ скопировать изображения относительно URL-адреса - это использовать Java-апплет, плагин Windows ActiveX, .net код или перетащить его.

Answer 5

Чтобы помочь другим, я оставлю здесь ссылку с ответом Ника Ратталака

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    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);
    }
  }
}

Как работает вставка изображения из буфера обмена в Gmail и Google Chrome 12+?

Answer 6

К сожалению, невозможно вставить изображение из буфера обмена в RTE.

Если вы скопируете большой двоичный объект из настольного приложения, такого как Microsoft Word, которое содержит изображение и некоторый текст, изображение превратится в неработающую ссылку (хотя пропорции будут правильными), и текст будет вставлен правильно (форматирование будет быть потерянным).

Единственное, что возможно, это скопировать изображение в RTE и вставить обратно в RTE.