Use JS to capture video clips directly to generate GIF animation

It’s a very familiar look these days.

Recently see zhang greatly “pure front end can be transferred figure can subtitle lines customized GIF expression generator” write about the front end to do GIF article. Since I have been exposed to videos recently, I will simply take it one step further and quickly generate GIFs directly from a library.

Directly put reference DEMO effect

Realize the principle of

In fact, relatively speaking, it also uses a core library gif.js, which can directly achieve screenshots of the incoming Canvas object and save it as the last BLOB object.

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();  
Copy the code

In addition, it leverages Daycaca, which converts the incoming Video element implementation into base64 image output. Support not only incoming video, can also be IMG elements or directly a picture address transcoding.

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

Then we can do this with setTimeout/ setInterval, so you need to set your FPS, compare GIF to video, GIF doesn’t need that high frequency, about 6 frames per second is acceptable.

core-video-to-gif

Of course, I made a package to facilitate the use of such functions in future projects.

Core-video-to-gif is a front-end JavaSCript library that supports capturing videos as GIFs.

NPM

$ npm install core-video-to-gif --save
Copy the code

CDN

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

Code in the page:

const v2g = new CoreVideoToGif({  
    // specify the video element
    el: document.querySelector('video')
})
v2g.shot({  
    // options,
    start: 5, // ms
    end: 8
}, (result) => {
    // ...
    image.src = result
})
Copy the code

Initialization parameters

* indicates mandatory

API

shot(params, callback)

Take a screenshot of a fragment

 // 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
})
Copy the code

##### Parameter Meaning

It is still under development and plans to support uploading and other functions in the later stage.

The project address

Further reading

• www.zhangxinxu.com/wordpress/2…
• Github.com/jnordberg/g…
• Github.com/JackPu/dayc…