2

查看 APNG 规范，似乎 APNG 是在其“额外”块中描述第一个帧之后的帧的 PNG。因此，通过组合 PNG 标头和附加 dataURI，在 Javascript 中轻松创建 APNG 似乎是可行的对他们来说。但是进展并不顺利。

function compileAPNG (frames, width, height, fps) {

    var fromCharCode = String.fromCharCode;

    var CRC = fromCharCode(0, 0, 0, 0);

    var pngData = fromCharCode(137, 80, 78, 71, 13, 10, 26, 10);

    pngData += fromCharCode(0, 0, 0, 13) + "IHDR" + convertIntToBytes(width) + convertIntToBytes(height) + fromCharCode(0, 0, 0, 0, 0) + CRC
    pngData += fromCharCode(0, 0, 0, 8) + "acTL" + convertIntToBytes(frames.length) + fromCharCode(0, 0, 0, 0) + CRC;
    pngData += fromCharCode(0, 0, 0, 25) + "fcTL" + fromCharCode(0, 0, 0, 0) + convertIntToBytes(width) + convertIntToBytes(height);
    pngData += fromCharCode(0, 0, 0, 0, 0, 0, 0, 0, 0, 0) + convertShortToBytes(fps) + fromCharCode(1, 0) + CRC;
    pngData += convertIntToBytes(frames[0].toDataURL().length) + "IDAT" + frames[0].toDataURL() + CRC;

    for (index = 1; index < frames.length; index++) {
        pngData += fromCharCode(0, 0, 0, 25) + "fcTL" + fromCharCode(0, 0, 0, 0) + convertIntToBytes(width) + convertIntToBytes(height);
        pngData += fromCharCode(0, 0, 0, 0, 0, 0, 0, 0, 0, 0) + convertShortToBytes(fps) + fromCharCode(1, 0) + CRC;
        pngData += convertIntToBytes(frames[index].toDataURL().length) + "fdAT" + convertIntToBytes(index) + frames[index].toDataURL() + CRC;
    }
    pngData += fromCharCode(0, 0, 0, 0) + "IEND" + CRC;
    window.open("data:image/png;base64," + btoa(pngData));
}

CRC 计算的计算成本很高，所以我试图通过将它们全部设置为 0 来伪造它们。这就是 Firefox 不接受 dataURI 作为图像的原因吗？

4

1 回答 1

3

至少由于以下原因，您的文件被 Firefox 拒绝：

  1. Firefox 将拒绝具有不正确 CRC 的块。

  2. IHDR 位深度不能为零。

  3. fcTL 块和 fdAT 块上的序列号，除了第一个 fcTL 块，不能为零（必须是 0001、0002 等）

于 2015-08-03T03:22:48.980 回答