動畫PNG到畫布

Question

我正在使用腳本來復制動畫PNG，將其放到畫布上以使用摳像濾鏡。

一切似乎都正常，但是我沒有將圖像復制到畫布上進行動畫處理。

我正在使用DrawImage，這是哪里出錯了。 我已經嘗試並出錯了一段時間，但我只是不明白如何不將動畫PNG轉換為靜態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());
}

我的來源主要是： https : //hmp.is.it/creating-chroma-key-effect-html5-canvas/

我也使用視頻嘗試了同樣的方法，雖然可以，但是使用了太多的客戶端資源。

在這里的JSBin： https: //jsbin.com/bezahoziwu/edit ? html,js,output在此Bin上的Filering不起作用，因為我猜圖像是來自另一個URL。

Answer 1

根據有關Canvas 2DRenderingContext drawImage方法的規范 ，

具體來說，當CanvasImageSource對象在HTMLOrSVGImageElement中表示動畫圖像時，用戶代理必須使用動畫的默認圖像（如果不支持或禁用動畫，則使用格式定義的圖像），或者不是此類圖像，即為CanvasRenderingContext2D API渲染圖像時的動畫的第一幀。

這適用於.gif ，SMIL動畫.svg ，CSS動畫.svg ， .mjpeg媒體和APNG。 因此，只能在畫布上繪制一幀。

您將不得不手動解析您的APNG文件並從中提取所有幀。