Comments 26
Эх, думал что тут хак чтоб APNG и в хроме показывался нормально :( Но все равно полезная штука :)
Попробуйте вот это расширение
Как я понимаю, вся сила в строке
isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0; Разъяснили бы кратко, что там к чему.
Эли Грей сам не расписывает свой метод,
как я понял «вся сила» в анимированной картинке завёрнутой в dataUri.
Могу только предположить, что drawImage размещает в canvas последний, а не первый, кадр из анимированной картинки.
Главное же, что CanvasPixelArray возвращаются разные, для анимированной и неанимированной картинок.
Добавил ссылку на автора кода.
как я понял «вся сила» в анимированной картинке завёрнутой в dataUri.
Могу только предположить, что drawImage размещает в canvas последний, а не первый, кадр из анимированной картинки.
Главное же, что CanvasPixelArray возвращаются разные, для анимированной и неанимированной картинок.
Добавил ссылку на автора кода.
Просто догадаться. Я когда увидел заголовок сразу придумал как бы я это сделал.
В Data URI находится APNG с двумя кадрами, которые меняются без задержки и не закальцованы. В браузерах с поддержкой APNG будет виден последний кадр, без оной — первый. Кадры 1×1 пиксель и различаются одной цветовой компонентой. Её и проверяем.
В Data URI находится APNG с двумя кадрами, которые меняются без задержки и не закальцованы. В браузерах с поддержкой APNG будет виден последний кадр, без оной — первый. Кадры 1×1 пиксель и различаются одной цветовой компонентой. Её и проверяем.
Не, логика такая:
canvasContext.getImageData(0, 0, 1, 1) возвращает объект ImageData для левого верхнего пикселя canvas. ImageData же содержит объект data типа CanvasPixelArray (по факту это массив Uint8ClampedArray), размерностью height × width × 4 (4 байта на пиксель, ибо RGBA). Ну и судя по data[3], смотрим на Alpha-компонент это одинокого пикселя.
Только одно маленькое замечание: Этот скрипт проверяет не «поддержку поддержку APNG» а «поддержку поддержку Canvas API + Data protocol + APNG „
К сожалению, более удобного способа без использования canvas и data Uri я не знаю.
Ну как же? Есть же ещё «порочная практика определения наименования и версии браузера».
Нууу. Все браузеры, которые не поддерживают Canvas — не поддерживают APNG ;)
Чем полагаться на такие вещи лучше, чем полагаться на версии браузеров? Практически то же самое выходит.
Тем, что если в новой версии Хрома добавится возможность проигрывать APNG — будем использовать нативную реализацию.
И то верно. Но не было бы разумней сначала отсеивать уже заведомо поддерживающие APNG браузеры, не заставляя их выполнять лишний код, и уже потом прогонять тест на остальных?
оно выполняется один раз за 0.1 микросекунды. Если отсеем «уже заведомо поддерживающие APNG браузеры», то в них будет выполнятся за 0.08 микросекунды, а в остальных — за 0.14 микросекунды. Думаете, имеет смысл?
Правда? Есть замеры? Как-то не верится. По-моему, Javascript вообще работает скорее в масштабах миллисекунд, чем микросекунд. Да вот и профилирование Firebug’ом на тестовой странице рапортует мне о 1,5 миллисекунд.
Да, тоже очень немного. Но я бы для очистки совести попробовал добавить предварительную фильтрацию и сравнить.
Да, тоже очень немного. Но я бы для очистки совести попробовал добавить предварительную фильтрацию и сравнить.
Надо было добавить «Анимация APNG с помощью canvas в Google Chrome, Internet Explorer 9, Apple Safari»
apng-canvas demo
Спасибо, однозначно в закладки.
apng-canvas demo
Спасибо, однозначно в закладки.
забыл про не отражённую визуально невозможность оставлять ссылки недостойными,
вот ссылка на apng-canvas demo
davidmz.github.com/apng-canvas/
вот ссылка на apng-canvas demo
davidmz.github.com/apng-canvas/
Ну да. Только в браузерах, где есть Canvas. Это вполне логично, что в браузерах, где нету Canvas нельзя сделать анимацию с помощью Canvas.
Тем не менее, это замечательно, т.к. уже все современные браузеры могут поддерживать apng.
Тем не менее, это замечательно, т.к. уже все современные браузеры могут поддерживать apng.
isApngSupported = canvasContext.getImageData(0, 0, 1, 1).data[3] === 0;
if (typeof isApngSupported !== "boolean") {
var isApngSupported = false;
}
А какой тип кроме «boolean» может вернуть операция "==="
На будущее: полупрозрачный лоадер можно сделать с помощью сдвига PNG-спрайта джаваскриптом, даже красивее будет
Sign up to leave a comment.
Прикручиваем определение поддержки формата APNG к Modernizr