Вставка изображения на страницу из буфера обмена на JavaScript
Доброго времени суток! Данный скрипт позволяет вставить изображение на страницу из буфера обмена при нажатии комбинации клавиш Ctrl + V.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Paste Image From Clipboard</title>
<style>
body {
padding-top: 10px;
height: 100vh;
text-align: center;
color: rgb(56, 55, 55);
font-size: 2rem;
text-decoration: dashed;
}
img {
border-radius: 8px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
max-width: 800px;
}
img:hover {
transform: translateY(5px);
box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<p>Скопируйте любое изображение и нажмите на странице Ctrl + V</p>
<img id="image" />
<script>
// обработчик события вставки привязан ко все странице
document.onpaste = function (pasteEvent) {
// получаем первый элемент содержимого буфера обмена
const item = pasteEvent.clipboardData.items[0];
// смотрим, является ли элемент изображением
if (item.type.indexOf("image") === 0) {
// преобразуем содержимое первого элемента буфера обмена в файл
const blob = item.getAsFile();
// создаем объект, считывающий файлы
const reader = new FileReader();
// когда файл загрузится
reader.onload = function (event) {
// вставляем его на страницу
document.getElementById("image").src = event.target.result;
};
// запускаем чтение двоичных данных файл как тип data URL
reader.readAsDataURL(blob);
}
}
</script>
</body>
</html>
Таким образом, при нажатии на комбинацию Ctrl + V, если в системном буфере обмена первый объект является изображением, то он будет вставлен и отображен на странице.
-
Создано 15.09.2022 09:13:04
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.