Question

我无法创建涂有红色像素的GIF动画。
（我要使用的库是gif.js https://jnordberg.github.io/gif.js/）

我创建了两个示例来更好地解释我的问题。这两个示例都使用了4个16x16px base64编码的png小图像。所有代码都在html文件中。

http://markovi.ch/files/gif/index-bad.html
本示例打开一个具有完全透明gif的新窗口。但是源图像既不透明也不设置透明颜色的设置。

但是...

http://markovi.ch/files/gif/index-ok.html
在看起来不错的新窗口中创建gif。

代码没有区别。唯一的不同是，我在源图像的左上角放置了1个像素的红点。

我使用的是gif.js网站上描述的标准代码。这段代码来自上面的index-bad.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="gif.js"></script>
</head>
<body>
    <img id="i1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUklEQVQ4T2NkYGD4z0ABYBw1gAFnGKCHLEghNoDXAGRNIAOxGTKIDQD5F9nZJHsBZgBywJEcBoQ0g+RRAhE56tBjAJdhJOcF9LAg2QD0xESxAQA2Rh4BzpwIXAAAAABJRU5ErkJggg==" alt="">
    <img id="i2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4T2NkYGD4z0ABYBwmBpAaCCB/wwDOMEA3FFkTcphjNQCkGVkDzDBshhBlAMhGdEPxegGbYvobAHIizM8khwHMz+ihjS3FD5ekTEFuZgAAVlAdAeKeTr4AAAAASUVORK5CYII=" alt="">
    <img id="i3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVQ4T2NkYGD4z0ABYBymBoACBeQ3YgDWMKCaAcjRg8tFOF0Acj6yJphh6AaR5AVsXqOfASR7AVsUYgtInEmZ2KiknQHEpEJYVFOUnQHffx8B9D4zGwAAAABJRU5ErkJggg==" alt="">
    <img id="i4" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAQ0lEQVQ4T2NkYGD4z0ABYBxaBoD8CnIyMsDpBeSAgWki2QBkjTBbSXIBsmKYi+hrALbkQbQLsGkmKRBHDSA+e1KcGwEitx8BbZBuswAAAABJRU5ErkJggg==" alt="">
    <script>
        function playGif () {
            let gif = new GIF({
                    workers: 2,
                    quality: 12,
                    dither: false,
                    width: 16,
                    height: 16
                });

            gif.addFrame(document.getElementById("i1"), {delay: 100});
            gif.addFrame(document.getElementById("i2"), {delay: 100});
            gif.addFrame(document.getElementById("i3"), {delay: 100});
            gif.addFrame(document.getElementById("i4"), {delay: 100});

            gif.on("finished", function (blob) {
                window.open(URL.createObjectURL(blob));
                console.log("aaa");
            });

            gif.render();
        }
        playGif();
    </script>
</body>
</html>

index-ok.html文件使用相同的代码。仅图像src字符串不同。

看起来图像的左上角有一个红色像素切换了动画gif的不透明/透明渲染！？

有没有建议如何在没有上述“ hack”的情况下呈现动画gif？

gif.js库的红色像素透明度问题

0 个答案: