Проблема прозрачности красных пикселей с библиотекой gif.js - PullRequest
Новая
       42

Проблема прозрачности красных пикселей с библиотекой gif.js

0 голосов
/ 20 мая 2019

Я не могу создавать анимированные GIF-файлы, нарисованные красными пикселями.
(Я пытаюсь использовать библиотеку gif.js https://jnordberg.github.io/gif.js/)

. Я создал два примера, чтобы лучше объяснить мою проблему.В обоих примерах используются 4 небольших изображения в формате PNG с кодировкой 16x16px base64. Весь код находится в 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-файлов!?

Любые предложения, как сделать анимированный GIF-файл без упомянутого выше "хака"?

...