设置时间函数
setInterval()
、通过canvas截取video元素固定时间间隔的帧画面
调用
gif.addFrame()
，将截取画面作为 gif 中的一帧追加到gif图中
监听视频播放完毕的
onended
事件，调用
gif.render()
完成对gif添加帧的渲染
监听
gif.on('finished', function(blob){})
将blob转为可下载链接并下载到本地
var
gif = new GIF({
quality: 10,
workerScript: './gif.worker.js',
debug: true
gif.addFrame(canvasElement, {delay: 200});
gif.on('finished', function(blob) {
const url = URL.createObjectURL(blob);
gif.render();
input.addEventListener('change', () => {
const videoFile = e.target.files[0];
const videoUrl = URL.createObjectURL(videoFile)
video.setAttribute('src', videoUrl);
const videoGif = new GIF({
workers: 2,
quality: 1,
workerScript: './gif.worker.js',
debug: true
const delay = 100;
video.addEventListener('loadedmetadata', () => {
const width = this.video.videoWidth / 5;
const height = this.video.videoHeight / 5;
video.setAttribute('style', `width:${width}px;height:${height}px`);
video.addEventListener('ended' = () => {
clearInterval(timer);
videoGif.render()
videoGif.on('finished', blob => {
const gifImg = URL.createObjectURL(blob);
video.play();
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
const timer = setInterval(() => {
canvas.width = width;
canvas.height = height;
canvas.delay = delay
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
const imgImage = new Image();
imgImage.src = canvas.toDataURL("image/png");
imgImage.onload = (e) => {
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgImage, 0, 0, canvas.width, canvas.height);
gif.addFrame(canvas, {copy: true, delay: canvas.delay});
}, delay)
download.addEventListener('click', () => {
const aLink = document.createElement('a');
aLink.setAttribute('download', 'img')
aLink.setAttribute('href', gifImg)
aLink.click()
DEMO 在线体验
Canvas
- 83
-
用户5777537485797
计算机图形学
