Вставка изображения из буфера обмена на JavaScript
Вставка изображения из буфера обмена на JavaScript
В интернетах популярны различные хостинги картинок, на некоторых из них есть возможность вставки изображений из буфера обмена для последующей загрузки. Это весьма интересная и полезная функция, так что мне, естественно, стало любопытно, как это делается.
Начнем как всегда с небольшой теории. Для работы с буфером обмена в JavaScript имеется специальный интерфейс Clipboard API. Но для доступа к его методам требуется выполнение нескольких условий: web-страница должна быть открыта по протоколу https или должна хоститься на localhost, а также она должна находиться в активной вкладке браузера. Конечно же не стоит забывать о поддержке браузерами этих методов.
Для упрощения кода я приведу лишь саму вставку изображений на страницу, плюс небольшое стилевое оформление добавленных изображений. Верстка и стили простейшие.
Code (HTML) : Убрать нумерацию
- <div id="image_row"></div>
Code: Убрать нумерацию
- <style type="text/css">
- .upload_img {
- margin: 1px 2px 1px 2px;
- float:left;
- display: flex;
- justify-content: center;
- border-radius: 5px;
- border: 2px solid #909090;
- padding: 2px;
- }
- .upload_img img {
- height: 250px;
- border-radius: 5px;
- }
- </style>
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- if (window.Clipboard) {
- // Установить обработчик вставки
- window.addEventListener("paste", pasteHandler);
- function pasteHandler(e) {
- if (e.clipboardData) {
- // Родительский элемент для вставки картинок
- var parent_row=document.getElementById('image_row');
- // Получаем все содержимое буфера обмена
- var items=e.clipboardData.items;
- if (items) {
- // Перебираем список на предмет изображений
- for (var i=0; i<items.length; i++) {
- // Это изображение?
- if (items[i].type.indexOf('image')!==-1) {
- // Получаем изображение в виде файла
- var file=items[i].getAsFile();
- var reader = new FileReader();
- // Добавить изображение на страницу
- reader.onloadend = function(evt) {
- if (evt.target.readyState == FileReader.DONE) {
- var new_div=document.createElement('div');
- new_div.className='upload_img';
- var new_img=document.createElement('img');
- new_img.src = evt.target.result;
- new_div.appendChild(new_img);
- parent_row.appendChild(new_div);
- }
- };
- // Кроссбраузерная загрузка изображения
- var blob;
- if (file.slice) {
- blob=file.slice(0, file.size);
- }
- else if (file.webkitSlice) {
- blob=file.webkitSlice(0, file.size);
- }
- else if (file.mozSlice) {
- blob=file.mozSlice(0, file.size);
- }
- reader.readAsDataURL(blob);
- }
- }
- }
- }
- }
- }
- </script>
Проверяя типы данных, которые содержатся в буфере обмена, можно обрабатывать не только картинки, но и файлы других типов, а также, например, текстовую информацию. Ну а непосредственно отправлять на сервер изображение со страницы можно при помощи кода, который представлен в одной из предыдущих статей. Изменения будут минимальные.
Рабочий вариант страницы, на которую добавляются изображения из буфера обмена, можно посмотреть здесь.
Просмотров: 129 | Комментариев: 0
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,172 раза
Поблагодарили 35,172 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |