Прикручиваем определение поддержки формата APNG к Modernizr

[RiderSx]

Эх, думал что тут хак чтоб APNG и в хроме показывался нормально :( Но все равно полезная штука :)

[VakarimaZ]

Попробуйте вот это расширение

[JhaoDa]

Как я понимаю, вся сила в строке isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0; Разъяснили бы кратко, что там к чему.

[SeVit]

Эли Грей сам не расписывает свой метод,
как я понял «вся сила» в анимированной картинке завёрнутой в dataUri.
Могу только предположить, что drawImage размещает в canvas последний, а не первый, кадр из анимированной картинки.
Главное же, что CanvasPixelArray возвращаются разные, для анимированной и неанимированной картинок.

Добавил ссылку на автора кода.

[bolk]

Просто догадаться. Я когда увидел заголовок сразу придумал как бы я это сделал.

В Data URI находится APNG с двумя кадрами, которые меняются без задержки и не закальцованы. В браузерах с поддержкой APNG будет виден последний кадр, без оной — первый. Кадры 1×1 пиксель и различаются одной цветовой компонентой. Её и проверяем.

[JhaoDa]

Не, логика такая: canvasContext.getImageData(0, 0, 1, 1) возвращает объект ImageData для левого верхнего пикселя canvas. ImageData же содержит объект data типа CanvasPixelArray (по факту это массив Uint8ClampedArray), размерностью height × width × 4 (4 байта на пиксель, ибо RGBA). Ну и судя по data[3], смотрим на Alpha-компонент это одинокого пикселя.

[TheShock]

Вообще-то все браузеры поддерживают первый кадр APNG, тк он обратно совместим с обычным PNG. Вопрос в том, почему в браузерах, которые поддерживают APNG отрисовывается другой кадр,

[bolk]

Потому что там конечная анимация из двух кадров.

[bolk]

А! Совсем забыл. В APNG есть такая фишка — первый кадр можно совсем не использовать, а браузеры, понимающие только PNG, будут использовать только первый кадр.

[KAndy]

Только одно маленькое замечание: Этот скрипт проверяет не «поддержку поддержку APNG» а «поддержку поддержку Canvas API + Data protocol + APNG „

[SeVit]

К сожалению, более удобного способа без использования canvas и data Uri я не знаю.

[torbasow]

Ну как же? Есть же ещё «порочная практика определения наименования и версии браузера».

[TheShock]

Нууу. Все браузеры, которые не поддерживают Canvas — не поддерживают APNG ;)

[torbasow]

Чем полагаться на такие вещи лучше, чем полагаться на версии браузеров? Практически то же самое выходит.

[TheShock]

Тем, что если в новой версии Хрома добавится возможность проигрывать APNG — будем использовать нативную реализацию.

[torbasow]

И то верно. Но не было бы разумней сначала отсеивать уже заведомо поддерживающие APNG браузеры, не заставляя их выполнять лишний код, и уже потом прогонять тест на остальных?

[TheShock]

оно выполняется один раз за 0.1 микросекунды. Если отсеем «уже заведомо поддерживающие APNG браузеры», то в них будет выполнятся за 0.08 микросекунды, а в остальных — за 0.14 микросекунды. Думаете, имеет смысл?

[torbasow]

Правда? Есть замеры? Как-то не верится. По-моему, Javascript вообще работает скорее в масштабах миллисекунд, чем микросекунд. Да вот и профилирование Firebug’ом на тестовой странице рапортует мне о 1,5 миллисекунд.

Да, тоже очень немного. Но я бы для очистки совести попробовал добавить предварительную фильтрацию и сравнить.

[TheShock]

Анимация APNG с помощью canvas

[SeVit]

Надо было добавить «Анимация APNG с помощью canvas в Google Chrome, Internet Explorer 9, Apple Safari»
apng-canvas demo

Спасибо, однозначно в закладки.

[SeVit]

забыл про не отражённую визуально невозможность оставлять ссылки недостойными,
вот ссылка на apng-canvas demo
davidmz.github.com/apng-canvas/

[TheShock]

Ну да. Только в браузерах, где есть Canvas. Это вполне логично, что в браузерах, где нету Canvas нельзя сделать анимацию с помощью Canvas.

Тем не менее, это замечательно, т.к. уже все современные браузеры могут поддерживать apng.

[TheShock]

isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0;
if (typeof isApngSupported !== "boolean") {
    var isApngSupported = false;
}

А какой тип кроме «boolean» может вернуть операция "==="

[ArtyV]

На будущее: полупрозрачный лоадер можно сделать с помощью сдвига PNG-спрайта джаваскриптом, даже красивее будет

[vault]

мало того — анимированный гиф можно сохранять с альфа-прозрачностью, что полностью решает проблему.

[ArtyV]

Интересно. Как это сделать и где это работает?