Получите два небольших навыка JS - JS перехватывает первый кадр видео&Преобразовать изображение в Base64
Получите два небольших навыка JS - JS перехватывает первый кадр видео&Преобразовать изображение в Base64

фон

由于развивать Сделано раньшеШаблон перетаскивания VisualDragПри оптимизации,Фотографии и файлы, введенные с помощью переноски, необходимо сделать скриншотами в качестве обложки.,В настоящее время используется метод создания снимков экрана: htme2canvas.,Операция создания снимка экрана с использованием холста,Итак, вы столкнетесь с такой проблемой,Видео и кровать с изображением просто используют теги для добавления на холст, и снимок экрана не может быть успешно сделан. Последний шаг — преобразовать изображение в base64 и нарисовать его на холсте.,Волявидеоперехватыватьпервый кадркартина,Затем нарисуйте на холсте,Наконец сделайте скриншот,Наконец, после долгих метаний,Этот метод кажется успешным,Напишите эту статью, чтобы записать это.

JS перехватывает первый кадр видео

перехватыватьвидеоизпервый кадркаквидеоиз封面是一个很常见извидео上传из做法。Но такой подход обычно происходит при загрузке на сервер,Делаем скриншот на сервере,这个操作方法在我之前изблогпредставлено на：https://qkongtao.cn/?p=560#h2-4

Но иногда, чтобы не тратить ресурсы сервера на внешнем интерфейсе, вы можете использовать js для создания снимков экрана непосредственно на внешнем интерфейсе.

Код выглядит следующим образом:

Язык кода:javascript
копировать
<!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перехватыватьвидеопервый кадр</title>
</head>

<body>
    <div>
        <button onclick="cutImage()">перехватыватьвидеопервый кадр</button>
    </div>
    <div>
        <!-- Помните о междоменном загрязнении холста -->
        <video width="640" height="480" src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/20221016134256839.mp4"
            controls="controls" id="fileVideo" crossorigin="anonymous">您из浏览器不支持видеоиграть</video>
        <div>
            <p>видеопервый кадр：</p> <img
                src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/upload.png?_upt=5b974ef11679068799"
                id="videoImg">
        </div>
    </div>

</body>

<script>
    function cutImage() {
        // Получить аудиотеги
        let video = document.getElementById('fileVideo')
        video.currentTime = 2 // первый кадр
        video.oncanplay = () => {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext('2d') // рисовать 2d
            canvas.width = video.clientWidth // Получить ширину видео
            canvas.height = video.clientHeight // Получить высоту видео
            // Рисование с использованием методов объекта холста
            ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
            // Преобразование в форму base64
            let imgUrl = canvas.toDataURL("image/png");
            console.log('imgUrl :>> ', imgUrl);
            document.getElementById("videoImg").src = imgUrl
        }
    }
</script>

</html>

Эффект следующий:

Что требует внимания, так это проблема загрязнения холста, вызванная междоменными видеоресурсами, поэтому вам необходимо добавить к тегу видео crossorigin="anonymous".

Если вам нужно сделать снимок экрана более чем второго кадра, вам нужно сделать снимок экрана в методе video.oncanplay().

Преобразовать изображение в Base64

Во многих сценариях разработки для передачи необходимо использовать формат изображения base64. Обычно он используется в небольших файлах изображений миниатюр для повышения скорости работы браузера.

Конечно, в холсте при рисовании изображения лучше всего преобразовать тег img изображения в base64, а затем выполнить drawImage(), чтобы избежать таких проблем, как загрязнение холста и проблемы между доменами.

Код выглядит следующим образом:

Язык кода:javascript
копировать
<!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>Преобразовать изображение в Base64</title>
</head>

<body>
    <div>
        <button onclick="imgToBase64()">Преобразование в форму base64</button>
    </div>
    <img id="img" src="http://upyun.qkongtao.cn/chevereto/2022/10/28/20210917152407654.jpg" alt="" width="300">
    <p>Преобразование в форму base64</p>
    <div id="base64" style="word-break: break-all;"></div>
</body>

<script>
    function imgToBase64() {

        var src = document.getElementById("img").src
        getImageUrlBase64(src).then(
            (dataUrl) => {
                base64Url = dataUrl;
                console.log('base64Url :>> ', base64Url);

                document.getElementById("base64").innerHTML = base64Url
            }
        );
    }

    /**@url :URL на сервере изображений
     * @img :Изображение, соответствующее URL-адресу изображения.
     * */
    function getImageUrlBase64(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.crossOrigin = "anonymous"; //Обработка междоменного доступа
            img.src = url;
            img.onload = function () {
                const canvas = document.createElement("canvas"); //Создаем элемент холста
                canvas.width = img.width; //Назначаем ширину изображения, соответствующую текущему URL-адресу, холсту
                canvas.height = img.height; //Назначаем высоту изображения, соответствующую текущему URL-адресу, холсту
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height); //Рисуем img на холсте один в один
                const dataUrl = canvas.toDataURL("image/jpeg"); //Вызов toDataURL холста, чтобы получить данные base64 для .jpg
                resolve(dataUrl);
            };
        });
    }
</script>

</html>

Эффект следующий:

boy illustration
Создавайте и защищайте связь в реальном времени с помощью SignalR и Azure Active Directory.
boy illustration
ВичатПубличная платформаразвивать（три）——ВичатQR-кодгенерировать&Сканировать кодсосредоточиться на
boy illustration
[Углубленное понимание Java IO] Используйте InputStreamReader для чтения содержимого файла и легкого выполнения задач преобразования текста.
boy illustration
сравнение строк PHP
boy illustration
9 сценариев асинхронного сбоя @Async
boy illustration
Эффективная обработка запланированных задач: углубленное изучение секретов библиотеки APScheduler на Python
boy illustration
Рекомендации по облегченному артефакту развязки внутренних компонентов Spring Event (событие Spring)
boy illustration
Go: Лесоруб-лесоруб на колесах Введение
boy illustration
Основы серверной разработки: технология кэширования, которую должен освоить каждый программист
boy illustration
Java Advanced Collections TreeSet: что это такое и зачем его использовать?
boy illustration
Оказывается, у команды go build столько знаний
boy illustration
Node.js
boy illustration
Анализ исходного кода, связанный с запланированными задачами версии ruoyi-vue (7), то есть анализ модуля ruoyi-quartz.
boy illustration
Вход в систему с помощью скан-кода WeChat (1) — объяснение процесса входа в систему со скан-кодом, получение авторизованного QR-кода для входа.
boy illustration
HikariPool-1 — обнаружено отсутствие потока или скачок тактовой частоты, а также конфигурация источника данных Hikari.
boy illustration
Сравнение высокопроизводительной библиотеки JSON Go
boy illustration
Простое руководство по извлечению аудио с помощью FFmpeg
boy illustration
Подсчитайте количество строк кода в проекте
boy illustration
Spring Boot элегантно реализует многопользовательскую архитектуру: концепции и практика
boy illustration
Как интегрировать функцию оповещения корпоративного WeChat в систему планирования xxl-job
boy illustration
SpringBoot интегрирует отправку сообщений через веб-сокет в режиме реального времени
boy illustration
Краткий анализ основных библиотек журналов в Go: узнайте, как интегрировать функции вращения и резки бревен на уровне проектирования.
boy illustration
Реализация API-шлюза с нуля-Golang
boy illustration
[Разговорный сайт] Как Springboot получает значения свойств из файлов конфигурации yml или свойств
boy illustration
Spring Boot — синхронные события приложения против асинхронных событий публикации и подписки. Практический бой
boy illustration
Spring Boot использует Swagger3 для создания документов интерфейса API.
boy illustration
[1269] Использование Gunicorn для развертывания проектов flask.
boy illustration
Краткое изложение 10 способов регистрации bean-компонентов в SpringBoot
boy illustration
Flask Learning-9. 2 способа включения режима отладки (debug mode).
boy illustration
Руководство по настройке самостоятельного сервера для Eudemons Parlu
©