Вставка изображения на страницу из буфера обмена на JavaScript

Вставка изображения на страницу из буфера обмена на 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, если в системном буфере обмена первый
объект является изображением, то он будет вставлен и отображен на странице.

Источник

Просмотров:

Добавить комментарий