Используйте JS для прямого перехвата видеоклипов для создания GIF-анимаций.

внешний интерфейс GitHub JavaScript Element

Это выражение очень знакомо всем в последнее время.

Недавно видел Чжан Да«Чистая интерфейсная реализация генератора выражений GIF, который может передавать изображения и настраивать субтитры и строки»Написал статью о создании GIF-файлов на интерфейсе. Из-за видео, с которыми я недавно общался, я просто пойду дальше и в будущем быстро сгенерирую гифки напрямую через библиотеку.

прямая ссылкаDEMOЭффект

Принцип реализации

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

var gif = new GIF({  
  workers: 2,
  quality: 10
});

// add an image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {  
  window.open(URL.createObjectURL(blob));
});

gif.render();

Кроме того, он также использовалdaycaca, который может преобразовывать входящий элемент Video в выходное изображение base64. Не только поддерживает входящее видео, но и транскодирует элементы IMG или прямой адрес изображения.

 daycaca.base64(this.video, (source, canvas) => {
          // ...
        this._gif.addFrame(canvas, {delay: intvalTime})
      })

Потом можно добиться зацикливания скриншотов через setTimeout/setInterval, поэтому нужно выставить свой fps, сравнить gif и видео, gif не нужна такая высокая частота, около 6 кадров в секунду допустимо.

core-video-to-gif

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

core-video-to-gifЭто интерфейсная библиотека классов JavaSCript, которая поддерживает перехват видео в формате gif.

NPM

$ npm install core-video-to-gif --save

CDN

<script src="./dist/core-video-to-gif.min.js"></script>

Код на странице:

const v2g = new CoreVideoToGif({  
    // specify the video element
    el: document.querySelector('video')
})
v2g.shot({  
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})
параметры инициализации
key Type Details Value
"*" эль Element Элементы видео, которые необходимо перехватить <video ... >
workerScript Element GIF-скрипт с поддержкой WebWorker Сохраните этот скрипт [файл] (https://github.com/JackPu/core-video-to-gif/blob/master/examples/gif.worker.js) локально и укажите путь
width Number ширина выходного gif 600(default: the video original height)
height Number высота выходного gif 600(default: the video original height)
maxTime Number Ограничьте максимальное время для GIF 5(default: 10)
fps Number сколько кадров в секунду 12(default: 6)
quality Number выходное изображение вашего качества (1-10) The best is 10
onStartShot Function Запускается при запуске скриншота
onGifProcess Function Когда триггер, чтобы начать делать Gif
onGifFinished Function Запускается, когда Gif готов

"*" означает, что необходимо установить

API

shot(params, callback)

Сделать скриншот сегмента

 // get current screenshot
v2g.shot( (result) => {  
    // ...
    image.src = result
})
// get screenshot from 5s - 8s
v2g.shot({  
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})

##### Значение параметра

key Type Details Value
start Number время начала 6(s)
end Number Конец времени 7(s)

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

адрес проекта

Расширенное чтение

Категории