<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=RecordRTC|gifshot&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["html2canvas.min"], function() {
                var elementToRecord = document.getElementById('element-to-record');
                var canvas2d = document.getElementById('background-canvas');
                var context = canvas2d.getContext('2d');

                canvas2d.width = elementToRecord.clientWidth;
                canvas2d.height = elementToRecord.clientHeight;

                var isRecordingStarted = false;
                var isStoppedRecording = false;



                (function looper() {
                    if (!isRecordingStarted) {
                        return setTimeout(looper, 500);
                    }

                    html2canvas(elementToRecord).then(function(canvas) {
                        context.clearRect(0, 0, canvas2d.width, canvas2d.height);
                        context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);

                        if (isStoppedRecording) {
                            return;
                        }

                        requestAnimationFrame(looper);
                    });
                })();

                var recorder = new RecordRTC(canvas2d, {
                    type: 'canvas'
                });

                document.getElementById('btn-start-recording').onclick = function() {
                    this.disabled = true;

                    isStoppedRecording = false;
                    isRecordingStarted = true;

                    recorder.startRecording();
                    document.getElementById('btn-stop-recording').disabled = false;
                };

                document.getElementById('btn-stop-recording').onclick = function() {
                    this.disabled = true;

                    recorder.stopRecording(function() {
                        isRecordingStarted = false;
                        isStoppedRecording = true;

                        var blob = recorder.getBlob();
                        gifshot.createGIF({
                            'video': blob
                        },
                            function(obj) {
                                if (!obj.error) {
                                    var image = obj.image,
                                    animatedImage = document.createElement('img');
                                    animatedImage.src = image;
                                    document.body.appendChild(animatedImage);
                                }
                            });
                        // document.getElementById('preview-video').srcObject = null;
                        document.getElementById('preview-video').src = URL.createObjectURL(blob);

                        document.getElementById('preview-video').parentNode.style.display = 'block';
                        elementToRecord.style.display = 'none';

                        // window.open(URL.createObjectURL(blob));
                    });
                };


            });
        });
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
    <style>
        html, body {
            margin: 0!important;
            padding: 0!important;
        }

        video {
            width: auto;
            max-width: 100%;
        }

    </style>
</head>
<body>

    <h1>用RecordRTC录制html元素并生成gif</h1>

    <p>
        点击录制,然后滚动一下下面的div,5秒后点击结束录制
    </p>

    <button id="btn-start-recording">开始录制</button>
    <button id="btn-stop-recording" disabled>结束录制</button>

    <hr>
    <div style="display: none;">
        <video controls autoplay playsinline id="preview-video"></video>
    </div>
    <div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px;height:100px;overflow:scroll;">
        <img src="http://editor.bfw.wiki/bfwrepo/image/demoimg.jpg" />
    </div>

    <canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>

</body>
</html>