javascript - 将数据 URI 合并到 APNG 中？

Question

查看 APNG 规范，似乎 APNG 是描述其“额外” block 中第一个帧之后的帧的 PNG。因此，仅通过合成 PNG header 即可在 Javascript 中轻松创建 APNG 似乎是可行的并将 dataURI 附加到它们。然而，它并不顺利。

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 作为图像的原因吗？

Answer 1

Firefox 至少出于以下原因拒绝了您的文件:

1. Firefox 将拒绝 CRC 错误的 block 。

2. IHDR 位深度不能为零。

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