アニメーション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 here：https://jsbin.com/bezahoziwu/edit?html,js,outputこの箱でのフィルタリングは、画像が別のURLからのものだと推測しているため機能しません。

Answer 1

CanvasImageSourceオブジェクトがHTMLOrSVGImageElementにアニメーション画像を表す場合に具体的に、ユーザエージェントは、アニメーションのデフォルトの画像（フォーマット1を使用しなければならないキャンバス2DRenderingContext drawImage方法、

約to specsよりますCanvasRenderingContext2D API用に画像をレンダリングするときにアニメーションがサポートされていないか無効になっている場合に使用される）、またはそのような画像がない場合はアニメーションの最初のフレームです。

これは .gifメモに適用され、SMILは.SVG、.SVG、.mjpegメディアとAPNGアニメーションCSSアニメーション。したがって、1つのフレームだけをキャンバスに描画する必要があります。

手動でAPNGファイルを解析し、そこからすべてのフレームを抽出する必要があります。