Веб-битва: видео в сочетании с холстом для создания видео онлайн-скриншотов

внешний интерфейс JavaScript jQuery Canvas

Позвольте мне объяснить вам интересную небольшую демонстрацию, которую я видел несколько дней назад: видео скриншоты онлайн. Вот рендеринг после того, как я изменил и добавил новые функции:


Разве это не круто? Это на самом деле довольно просто. Позвольте мне рассказать вам, как это сделать.

Это в основном делится на три основные функции, первая - это первая:

Используйте объект URL, чтобы получить ссылку на видео и отобразить ее:

js объект URL имеетcreateObjectURLметод, он может получить URL-адрес файла (объект File) и вставить его вvideoэлементальsrcТаким образом, может быть реализовано отображение видео. Конечно, как получить объект File, существуют различные методы, такие как использование элемента ввода или использование метода перетаскивания. Полный фрагмент кода:

<input type="file"/>

document.querySelector('input[type="file"]').addEventListener('change',function () {
    document.querySelector('video').src = window.URL.createObjectURL(this.files[0])
})

Конечно, это не то, что я написал в исходном коде, просто для демонстрации. Для более конкретного использования URL-адресов вы можете увидетьэта статьяили МДН.

Используйте холст для создания скриншотов видео:

Следующий шаг является ключевым, но он также очень прост, то есть использоватьcanvasизdrawImageметод, если вы обратитесь к Разделу 15.2.6 Подъема 3, вы найдетеdrawImageПрименение метода описано очень подробно, но упущен один момент, а именно:videoЭлементы также могут быть переданы вdrawImageметод и нарисуйте график. Конкретный сегмент кода:

var canvas = document.createElement("canvas");
var canvasCtx = canvas.getContext("2d");
var video=document.querySelector('video');
//坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。
canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);
//把图标base64编码后变成一段url字符串
var dataUrl = canvas.toDataURL("image/png");
//插入图片得src特性中
document.createElement('img').src=dataUrl;

После нанесения изображения звонитеcanvasизtoDataURlСпособ изображения становитсяbase64закодированный URL, его можно вставить вimgЭлементы отображаются, и создание уменьшенного изображения завершено. Что касается взаимосвязи между изображениями и base64, то конкретные учащиеся могут посмотретьэта статья.

Для достижения эффекта анимации:

Основной принцип реализации анимации таков: сначала создайте большую картинку такого же размера, как видео в исходном месте видео, и установите ее как абсолютный макет (position:absolut) Создайте небольшое изображение, где на самом деле размещены миниатюры, установите невидимый (visibility：hidden), Затем большая картинаleftа такжеtopдобиться смещения,widthа такжеheightРеализуйте сокращение до фактического места, где находится миниатюра, и сформируйте эффект анимации. Наконец, удалите большое изображение и отобразите маленькое изображение. Конкретный сегмент кода:

function getOffset(elem) {
    var pos = {x: elem.offsetLeft, y: elem.offsetTop};
    var offsetParent = elem.offsetParent;
    while (offsetParent) {
        pos.x += offsetParent.offsetLeft;
        pos.y += offsetParent.offsetTop;
        offsetParent = offsetParent.offsetParent;
    }
    return pos;
}

Эта функция предназначена для получения расстояния между маленьким изображением и окном просмотра (окном просмотра) и предоставления его большому изображению в качестве параметра смещения.Раздел 12.2.3 Elevation 3 имеет почти такой же код, с подробными инструкциями и альтернативами.getBoundingClientRectФункция также упоминается, давайте полистаем книгу для деталей.

Следующий код предназначен для создания больших и маленьких изображений и их анимации. Для простоты понимания я использую здесь JQuery

var $imgBig = $("<img/>");
//设置大图片的初始位置，就是原视频处。
$imgBig.css({
    position: "absolute",
    left: video.offsetLeft,
    top: video.offsetTop,
    width: video.offsetWidth+ "px",
    height: video.offsetHeight+ "px"
}).attr("src", dataUrl);
var $img = $("<img/>");
$img.hide();
//获取小图片的距离参数，实现大图片的动画效果。
var offset = getOffset($img[0]);
//添加动画效果
$imgBig.animate({
    left: offset.x + "px",
    top: offset.y + "px",
    width: $img.width() + "px",
    height: $img.height() + "px"
}, 500, function () {
    $img.show();
    $imgBig.remove();
});

Ну на этом основная часть кода закончена.Конечно есть еще много детальных проблем в конкретной реализации и другие функции могут не отображаться.Расписывать их по порядку не буду.Подробности можно прочитать в исходниках , Задавайте вопросы.

Ниже приведен мой адрес исходного кода, вы можете попробовать:

демо на гитхабе

И это моя ссылкаэта статья.


Категории