js剪辑视频片段制作gif

先来看一下效果：

实现原理：用canvas生成gif图，在渲染的时候不断将canvas转成png图片，再将它们添加到gif的每一帧，设置每隔多长时间进行添加

使用步骤：先挑选好要开始录制的节点，然后点击开始录制，录完之后点击结束按钮，稍等一段时间（时长取决于录制的时长大小）后，右面即为生成好的gif动图，点击图片即可下载

以下是源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gif制作</title>
    <style>
        body {
            display: flex;
        }
        .item {
            flex: 1;
        }
        h6 {

        }
    </style>
</head>

<body>
    <div class="item">
        <h2>video</h2>
        <video id="video" controls src="./video/3.mp4" width="512" height="288" ></video>
        <div>
            开始录制gif:
            <button onclick="onStart(this)">开始</button>
            <button disabled onclick="onStop(this)">结束</button>
            <label id="sec"></label>
        </div>
    </div>
    <div class="item">
        <h2>gif [点击图片下载]</h2>
        <a><img src="" id="gifEl" /></a>
        <canvas id="cvs" style="display: none;"></canvas>
    </div>
    
</body>
<script src="./js/gif.js"></script>
<script src="./js/gif.worker.js"></script>
<script>

    const cvs = document.getElementById('cvs')
    const ctx = cvs.getContext('2d')
    const video = document.getElementById('video')
    const gifEl = document.getElementById('gifEl')
    const sec = document.getElementById('sec')
    cvs.width = video.width
    cvs.height = video.height
    const gif = new GIF({
        workers: 20,
        quality: 1
    });
    let isRender = false
    const render = () => {
        if (ctx) {
            ctx.clearRect(0, 0, cvs.width, cvs.height)
            ctx.drawImage(video, 0, 0, cvs.width, cvs.height)
        }
        if (isRender) {
            sec.innerHTML = parseInt(sec.innerHTML) + 1 + '帧'
            const img = document.createElement('img')
            img.src = cvs.toDataURL('image/png')
            img.onload = () => {
                gif.addFrame(img, {
                    delay: 100 // 帧动画速度
                })
                
            }
            
        }
        setTimeout(render, 100)
        
    }
    render()
    const onStart = (me) => {
        sec.innerHTML = '0帧'
        video.play()
        isRender = true
        me.setAttribute('disabled', 'disabled')
        me.nextElementSibling.removeAttribute('disabled')

    }
    const onStop = (me) => {
        me.setAttribute('disabled', 'disabled')
        me.previousElementSibling.removeAttribute('disabled')
        isRender = false
        gif.on('finished', function (blob) {
            gifEl.src = URL.createObjectURL(blob)
            gifEl.parentElement.setAttribute('download', 'my.gif')
            gifEl.parentElement.href = gifEl.src
        });
        gif.render();
        
    }

   
    
    
</script>

</html>

注意：一定要在本地服务器上运行，不然会出现视频跨域问题无法正常显示视频

js剪辑视频片段制作gif

猜你喜欢