Запишите холст HTML 5 как GIF-анимацию

Question

после многих исследований в Stackoverflow и на других сайтах я решил создать свою учетную запись и спросить себя.

История: Я создаю приложение для рисования с HTML 5 Canvas с некоторыми функциями, чтобы помочь пользователю понять, как рисовать простые изображения в виде линий. Пользователи учатся у других пользователей. Чтобы добиться чего-то подобного, я хочу предоставить функцию «как это сделал кто-то другой».

Моя проблема: Я все настроил. Пользователи могут рисовать изображения и сохранять их в формате PNG на платформе, чтобы сделать свой вывод всем остальным. Теперь я хочу представить, что мои записи HTML 5 Canvas, пока пользователь рисует.

Для этого я хочу использовать jsgif или ccapture.js . Сначала я попытался настроить все с помощью jsgif, все было хорошо, но в конце я получил только черный gif. Может быть, я использую это неправильно?

Спасибо за ваши идеи.

Привет, Айти.

canvas = document.createElement('canvas');
    canvas.setAttribute('width', this.element_base.width());
    canvas.setAttribute('height', this.element_base.height());
    canvas.setAttribute('id', 'canvas');
    this.element_base.append(canvas);

    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }

    context = canvas.getContext("2d");
    encoder = new GIFEncoder();
    encoder.setRepeat(0);
    encoder.setDelay(500);

    // Enable Drawing
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var clickColor = new Array();
    var myColor = "black";
    var paint;
    var contextCollection = new Array();

    function addClick(x, y, dragging)
    {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
        clickColor.push(myColor);
    }

    $('#canvas').mousedown(function(e){
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        paint = true;
        encoder.start();
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    $('#canvas').mousemove(function(e){
        if(paint){
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });

    $('#canvas').mouseleave(function(e){
        paint = false;
    });

    $('#canvas').mouseup(function(){
        paint = false;
        encoder.addFrame(contextCollection, false);
        encoder.finish();
    });

    function redraw(){
        context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

        context.lineJoin = "round";
        context.lineWidth = 5;
        context.fillStyle = "#fff";

        for(var i=0; i < clickX.length; i++) {
            context.beginPath();
            if(clickDrag[i] && i){
                context.moveTo(clickX[i-1], clickY[i-1]);
            }else{
                context.moveTo(clickX[i]-1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.strokeStyle = clickColor[i];
            context.stroke();
        }

        contextCollection.push(context);

    }

    //save gif

    $('.submitImage').click(function(e){
        e.preventDefault();
        encoder.finish();
        encoder.download("image.gif");
    });


    // Change Color
    $(".circle").each(function(){
        $(this).click(function(){
            myColor = $(this).attr("class").split(" ")[1];
        });