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

Источник