Вставить изображение из буфера обмена с помощью JavaScript
Как мы вставляем изображение из буфера обмена в специальный текстовый редактор с использованием javascript? (ctrl + c и ctrl + v или моментальный снимок).
Кто-нибудь использовал текстовый редактор Ajax? Работает ли вставка изображения из буфера обмена в Ajax RTE?
Пожалуйста, поделитесь своими мыслями!
Спасибо!
Ответы
Ответ 1
Поскольку этот вопрос все еще часто появляется в результатах поиска Google, я хочу отметить, что это возможно сегодня, по крайней мере, в Google Chrome. Они реализовали его для использования в GMail, но он доступен для всех веб-сайтов.
Как работает изображение пасты из функции буфера обмена в Gmail и Google Chrome 12+?
Ответ 2
Это возможно сейчас в Chrome и Firefox. Я не уверен в IE/Safari.
Посмотрите на imgur.com, onpaste и cardboard.co в качестве примеров и посмотрите код для картона на github, а также Джоэл отлично написал в своем блоге
Для записи вам нужно, чтобы пользователь нажал Ctrl + V на своем элементе, а затем вы можете захватить данные в обработчике событий вставки, прочитав с event.clipboardData
, но чтобы заставить его работать вниз, вам нужно убедитесь, что фокус находится на пустом contenteditable элементе и вытащите результаты там, что плохо работает в Firefox 22. См. здесь
Ответ 3
Новые браузеры, такие как Firefox 4, поддерживают вставку данных изображений из буфера обмена в RTE как URI данных с зашифрованными данными PNG. Однако большинство веб-приложений неправильно анализируют эти URI данных и отбрасывают их. Yahoo mail правильно ручка. Однако Gmail и Hotmail отбрасывают его. Я сообщил об этом Google и Microsoft.
Ответ 4
Теперь я нашел объект clipboardData.
Но он извлекает только текстовый формат или URL из буфера обмена.
clipboardData
только IE, он работает с символьной строкой и возвращает null, если мы вставляем изображение.
тестовый пример
<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 code или перетащить его.
Ответ 5
К сожалению, невозможно вставить изображение из вашего буфера обмена в RTE.
Если вы скопируете blob из настольного приложения, такого как Microsoft Word, которое содержит изображение и какой-то текст, изображение будет отображаться как сломанная ссылка (хотя пропорции будут правильными), и текст будет вставлен правильно (форматирование будет быть потерянным).
Единственное, что возможно, это скопировать изображение в RTE и вставить обратно в RTE.
Ответ 6
Как-то:
Я не думаю, что это возможно.
Вы можете вставить имя файла, но вам действительно нужен полный путь к изображению.
Вам действительно нужно загрузить изображение с пользовательской системы на сервер.
Ответ 7
Доступ к JavaScript-буферу - это риск для безопасности, и если вы (ложно) думаете, что вам это нужно, вам, вероятно, нужно вернуться к вашему дизайну...