Animated PNG to canvas

Question

I am using a script to copy an animated PNG, put it to canvas to use a chromakey filter.

Everything seems to be working, but I don't get the image copied to the canvas to animate.

I am using DrawImage, which is where it goes wrong. I've been trial and erroring for a while, but I just don't understand how to not convert an animated PNG to a static PNG.

$(function(){
    var img = $("#source").get(0);
    var $canvasbg = $("<div id='target-container' />");
    var canvas = $("<canvas class='greenscreen'></canvas>").get(0);
    $canvasbg.append(canvas);
    $('#container').append($canvasbg);
    img.onload = function() {
        greenScreen(img, canvas, $canvasbg);
    };

});

function greenScreen(img, canvas, $container, bg) {
    var context = canvas.getContext('2d');
    canvas.width = img.clientWidth;
    canvas.height = img.clientHeight;
    $container.width(img.clientWidth);
    $container.height(img.clientHeight);
    context.drawImage(img, 0, 0);

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    var start = {
        red: data[0],
        green: data[1],
        blue: data[2]
    };


    // iterate over all pixels
    for(var i = 0, n = data.length; i < n; i += 4) {
        var diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);
        data[i + 3] = (diff*diff)/$('#tolerance').val();
    }
    context.putImageData(imageData, 0, 0);
    $container.css('background',$('#color').val());
}

My source mainly is: https://hmp.is.it/creating-chroma-key-effect-html5-canvas/

I also tried the same using video, which works, but uses way too many client sources.

JSBin here: https://jsbin.com/bezahoziwu/edit?html,js,output Filering on this Bin doesn't work because I am guessing the image is from another url.

Answer 1

According to specs about the Canvas 2DRenderingContext drawImage method,

Specifically, when a CanvasImageSource object represents an animated image in an HTMLOrSVGImageElement, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation, when rendering the image for CanvasRenderingContext2D APIs.

This applies to .gif , SMIL animated .svg , CSS animated .svg , .mjpeg media and APNG. So only one frame should be drawn onto the canvas.

You would have to parse manually your APNG file and extract all the frames from there.