Используйте холст для реализации функций воспроизведения видео и заграждения

внешний интерфейс Тенсент Canvas
Используйте холст для реализации функций воспроизведения видео и заграждения

напиши первым

На этот раз я расскажу об использовании холста для воспроизведения видео и добавлю функцию заграждения.

Добро пожаловать, чтобы следоватьмой блог, время от времени обновляется——

визуализация

Например, исходный код см.:Адрес источника
ezgif com-optimize

Вы можете видеть, что вверху — это видео, а внизу — видео, перерисованное с помощью холста и поддерживающее динамическое добавление заграждения.

холст загружает видео

на холстеdrawImageИсточником данных, необходимых методу для отрисовки картинки, является не только картинка, но и определенный кадр видео для отрисовки. так:

var video = document.getElementById('video')
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ctx.drawImage(video, 0, 0, width, height);//当视频开始播放后触发这个方法可以开始绘制视频

Зачем рисовать видео через холст?

потому что холст обеспечиваетgetImageData && putImageDataМетод позволяет оператору динамически менять отображение, чтобы получать статус каждого кадра изображения, если знать, как он должен меняться :)

Например, как упоминалось в MDN, вы можете изменить тон желтого фона в видео выше:пример адреса mdn

this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43)
        frame.data[i * 4 + 3] = 0; //将视频黄色部分的透明度进行了变化
    }
    this.ctx2.putImageData(frame, 0, 0);

Скриншот эффекта в видео выглядит следующим образом:
image
Дополнительные сведения о работе с изображениями на холсте см. в следующих двух статьях:

Обработка изображений на основе холста может реализовать очень мощные функции, такие как фильтры и тому подобное.

Произведено командой Tencent Aolly.AlloyImage — профессиональная библиотека обработки изображений на основе технологии HTML5.хороший пример. Автор не может понять тех продвинутых вещей, что за оператор Лапласа, разные операторы :)

Заградительная функция

Заградительная функция делится на две части:

  • Следите за появлением новых пуленепробиваемых экранов
  • Визуализация заграждения на странице

Следите за появлением новых пуленепробиваемых экранов

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

var Event = (function(){
    var list = {},
        listen,
        trigger,
        remove;
        listen = function(key,fn){ /收集监听事件
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){/触发后依次执行回调
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();
//调用方式
Event.listen('data', addNewWord）

$('#submit').click(function() { //点击发送后便触发data事件
  var data = $('input').val()
    Event.trigger('data', {
      value: data,
    })
})

function addNewWord (data) {
    var newWord = new Barrage(this.canvas, this.ctx, data) //构建新的弹幕实例
    wordObj.push(newWord)
},

Визуализация заграждения на странице

Объявите конструктор заграждения, который содержит различные свойства и добавляет метод рисования в цепочку прототипов для рисования:

function Barrage(canvas, ctx, data) {
    this.width = canvas.width
    this.height = canvas.height
    this.ctx = ctx
    this.color = data.color || '#'+Math.floor(Math.random()*16777215).toString(16) //随机颜色
    this.value = data.value
    this.x = this.width //x坐标
    this.y = Math.random() * this.height
    this.speed = Math.random() + 0.5
    this.fontSize = Math.random() * 10 + 12
}
Barrage.prototype.draw = function() {
        if(this.x < -200) {
            return
        } else {
            this.ctx.font = this.fontSize + 'px "microsoft yahei", sans-serif';
            this.ctx.fillStyle = this.color
            this.x = this.x - this.speed
            this.ctx.fillText(this.value, this.x, this.y)
        }
}

наконец

пользовательский заказБлог автора, время от времени обновляется——
Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь с нами в разделе «Вопросы».

Категории