Javascript.RU

RGBA GIF в Webkit браузерах, и что делать с Firefox, Opera и IE

Добрый день. Все мы знаем, что Firefox и Opera поддерживает APNG формат. Но Webkit не желает их отображать. Но недавно я нашел один секрет Webkit под кодовым названием "RGBA GIF". Все мы знаем, что у GIF всего 256 цветов. Но суть в том, чтобы RGBA разделить по индексам GIF, а цвета индексов приравнять к самим индексам т.е. [r,g,b] = [i,i,i] . При этом ширина увеличится в четверо. Кроме того, Webkit поддерживает анимацию GIF в HTML5 Canvas при определенных условиях.
Мы можем создать 32-битную GIF анимацию (так мы условно назовем). Анимация отлично поддается оптимизации. Достаточно одной глобально палитры и не нужен дизеринг. Кроме того, Webkit браузеры поддерживают content:-webkit-canvas();

Для браузеров Firefox и Opera достаточно использовать APNG. Для IE придется обойтись статичной картинкой, или попробовать вставить "неполноцветный" GIF.

Я вообщем о чем хочу сказать.
Для красивой анимации нужен http://jnglike.site40.net/rgba/demo.gif, скрипт и http://jnglike.site40.net/rgba/o_sample.png.

1. Подключаем скрипт rgba.js: http://jnglike.site40.net/rgba/rgba.js
2. Пишем в HTML:

<img src="o_sample.png" style="content:-webkit-canvas(test);width:116px;height:135px;">

3. Прописываем в скриптах:

RGBAtoCSSCanvasContext("demo.gif","test");

4. PROFIT!

Для IE можно попробовать заменить src на GIF. Стоит заметить, что указание высоты и ширины обязательны т.к. иначе отображаться просто не будет.
Кто хочет увидеть результат, тогда пожалуйста: http://jnglike.site40.net/rgba

+3

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 01:24
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
4 + 8 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum