动画PNG到画布 [英] Animated PNG to canvas

问题描述

我正在使用脚本复制动画PNG，将其放到画布上以使用色度键过滤器。

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.

我正在使用DrawImage，这是它出错的地方。我已经试用了一段时间，但我只是不明白如何不将动画PNG转换为静态PNG。

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());
}

我的来源主要是： 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这里： https://jsbin.com/bezahoziwu/edit?html,js,output 文件在这个Bin上不起作用，因为我猜这个图像来自另一个网址。

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.

推荐答案

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

According to specs about the Canvas 2DRenderingContext drawImage method,

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

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.

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

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

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

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

这篇关于动画PNG到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！