Skip to content

Latest commit

 

History

History
73 lines (52 loc) · 4.67 KB

README_RU.md

File metadata and controls

73 lines (52 loc) · 4.67 KB

apng-canvas v2.1.0

Библиотека для отображения Animated PNG (Wikipedia, стандарт) в браузере при помощи canvas.

Демонстрация: https://davidmz.github.io/apng-canvas/ (3 Mb of apng files)

Внимание! API версии 2 библиотеки несовместимо с API версии 1!

Для работы библиотеке требуется поддержка следующих технологий:

Эти технологии поддерживаются во всех современных браузерах и в IE начиная с версии 10.

Некоторые браузеры (на данный момент это Firefox и Safari 8+) имеют встроенную поддержку APNG, для них использование этой библиотеки не обязательно.

Пример использования

APNG.ifNeeded().then(function() {
    var images = document.querySelectorAll(".apng-image");
    for (var i = 0; i < images.length; i++) APNG.animateImage(images[i]);
});

Ограничения

Изображения загружаются при помощи XMLHttpRequest, следовательно, HTML-страница и APNG-картинка должны быть расположены на одном домене, либо сервер, отдающий картинку, должен отдавать правильный CORS-заголовок (например, Access-Control-Allow-Origin: *). По той же причине библиотека не будет работать с локальной машины (по протоколу file://).

Важно! Прокси-сервера, сжимающие трафик (турбо-режим в Опере и Яндекс.Браузере, режим экономии трафика в мобильном Chrome и т. п.), не знают о существовании формата APNG, и перекодируют его или в статический PNG или в какой-либо другой формат, в результате чего анимация теряется. Чтобы этого избежать, при отдаче APNG с вашего сайта вы должны использовать HTTP-заголовок Cache-Control: no-transform (см. обзорную статью по этой теме), либо отдавать такие изображения через HTTPS.

API

Библиотека создаёт глобальный объект APNG, имеющий несколько методов.

Высокоуровневые методы:

Низкоуровневые методы:

Большинство методов работают асинхронно и возвращают объект ES6 Promise. Большинство браузеров имеют его встроенную поддержку, для остальных используется полифилл, включённый в библиотеку. Если вы не работали раньше с Promises, то вам поможет обзорная статья об этой технологии. В описании методов приводятся значения результата-Promise в случае его выполнения (filfilled) или отказа (rejected).

Сборка

npm install
gulp build