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
key Type Details Value
“*” el Element The video elements you want to capture <video … >
workerScript Element Enable the WebWorker GIF script Locally retained this script [file] (https://github.com/JackPu/core-video-to-gif/blob/master/examples/gif.worker.js), then the specified path
width Number Output the width of the GIF 600(default: the video original height)
height Number Output GIF height 600(default: the video original height)
maxTime Number Limit the maximum length of gifs 5(default: 10)
fps Number How many frames per second 12(default: 6)
quality Number Output pictures of your quality (1-10) The best is 10
onStartShot Function Triggered when a screenshot is taken
onGifProcess Function Triggered when you start making a Gif
onGifFinished Function Triggered when a Gif is completed

* 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

key Type Details Value
start Number Start time 6(s)
end Number End time 7(s)

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…