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上不起作用，因为我猜这个图像是来自另一个网址。

Answer 1

根据to specs关于Canvas 2DRenderingContext drawImage方法，

具体来说，当CanvasImageSource对象表示HTMLOrSVGImageElement中的动画图像时，用户代理必须使用动画的默认图像（当不支持或禁用动画时，将使用格式定义的图像），或者，如果没有这样的图像，动画的第一帧，在渲染CanvasRenderingContext2D API的图像时。

这适用于 .gif ，SMIL动画 .svg ，CSS动画 .svg ， .mjpeg 媒体和APNG。因此，只应在画布上绘制一个帧。

您必须手动解析您的APNG文件并从中提取所有帧。

动画PNG到画布

1 个答案: