humblegenius Mar 25 2013 at 14:17

Canvas в GIF на Javascript

9 min

24K

JavaScript*

+62

Comments 33

homm Mar 25 2013 at 14:39

А изображения, использованные для теста, можно получить?

humblegenius Mar 25 2013 at 14:54

Добавил исходные картинки

homm Mar 25 2013 at 14:45

Нужно сделать pull request в jsgif, мне кажется.

humblegenius Mar 25 2013 at 15:12

Изначально я думал допилить jsgif. Но когда я начал разбираться, то мне совсем не понравилось, как там все внутри устроено. И к тому же пришлось бы все равно большую часть переделывать. Поэтому я решил использовать именно кодер omggif, так как к нему я без особого труда подсоединил сначала первый попавшийся квантизатор, ну и потом свой. Если я сделаю pull request, то это уже будет не jsgif от antimatter15, а omggif кодер + мой квантизатор

0lympian Mar 25 2013 at 15:30

Дык у GIF прозрачность не альфа-каналом, а «дыркоцветом», так что прозрачность получится сохранить лишь в некоторых случаях.

p.s. А зачем все это? Анимированный так не сделать, для всех остальных применений png лучше.

tagir_valeev Mar 25 2013 at 15:40

Вы не представляете, какие бывают заказчики и требования в техзаданиях. А с прозрачностью дело в том, какой цвет подложен под картинку: надо блендить с ним, а не просто игнорировать уровень прозрачности.

Triang3l Mar 25 2013 at 16:21

Можно для прозрачности использовать дизеринг (а точнее stippling), наподобие того, что использовался в Matrix Mystique.

Alexufo Mar 25 2013 at 21:42

Откуда у вас машина времени? Какой к черту stippling в 2013 году. Если только железо по другому не умеет.

Triang3l Mar 26 2013 at 10:04

Я про конвертирование из PNG в GIF. Вы комментарий двумя уровнями выше читали?

Alexufo Mar 26 2013 at 12:14

Конечно.

-1

Triang3l Mar 27 2013 at 19:43

Простите, не Matrix, а Matrox, клавиши рядом находятся.
Photoshop Save for Web именно так и делает, кстати.

Alexufo Mar 25 2013 at 21:43

Заказчик не хотел прислушиваться к мнению разработчика что с png24 лучше?

tagir_valeev Mar 26 2013 at 05:17

Скажем, заказчик из этого редактора сразу импортирует в какую-нибудь свою программу 20-летней давности, которая про PNG ничего не слышала. Дописать эту программу возможности нет — исходники утеряны. Использовать промежуточный конвертер заказчик не хочет. В данной ситуации мнение разработчика ничего не значит.

humblegenius Mar 25 2013 at 16:19

Почему анимированный так не сделать? Я ж написал, что omggif поддерживает анимацию. Ну и по поводу применения свою точку зрения написал в самом начале. Не буду сравнивать, что лучше gif или png. Моя цель была реализовать как можно больше форматов для своей программы и форматом GIF я не хотел бы жертвовать.

Alexufo Mar 25 2013 at 21:44

гиф заменен на png8 — он мервый формат. Живет только тем, что чертовски популярен как анимированная графика. Но механизм сделали отличный.

-1

bolk Mar 25 2013 at 22:08

Если «Опера» воткнёт АПНГ в ВебКит, то ГИФ обречён.

Alexufo Mar 25 2013 at 22:15

Я не знаю. Гифки чисто из за универсальности еще будут жить огого.

bolk Mar 25 2013 at 16:51

Что-то я прочитал текст, но не понял зачем в GIF, если можно сразу в PNG.

humblegenius Mar 25 2013 at 17:10

Потому что у меня редактор изображений :)
Посмотрим на Photoshop:

Посмотрим на Paint:

Посмотрим на любой другой редактор…
Может GIF и хуже PNG, но он есть везде.
Так чем же моя программа должна быть хуже? Хотелось бы чтоб ничем.

Подправлю немного описание, а то может и вправду непонятно )

Triang3l Mar 25 2013 at 18:01

Но и PNG есть везде.

humblegenius Mar 27 2013 at 20:04

PNG есть везде — это супер. Вы считаете, что теперь в редакторе изображений не нужна функция сохранения в формат GIF?

sunnybear Mar 25 2013 at 17:12

самый быстрый цикл — while

Triang3l Mar 25 2013 at 18:02

for быстрее в JavaScript, чем while, на JSPerf проверял.
while (number--) вообще в JS очень медленный, так как идет проверка и приведение типов.

sunnybear Mar 25 2013 at 18:15

В IE while быстрее, но в Chrome — for.
Да, ситуация сильно поменялась за 3 года

mib Mar 25 2013 at 20:51

При сравнении цветов еще можно попробовать учитывать тот факт, что у человеческого глаза разная чувствительность к красной зеленой и синей части спектра, соотношение примерно 30/59/11. То есть можно попробовать измерять разницу цветов примерно так:

(red=red1-red2)*red*30+(green=green1-green2)*green*59+(blue=blue1-blue2)*blue*11

Alexufo Mar 25 2013 at 21:40

png24 если нужна прозрачность. Остальное просто неграмотный подход к выбору формата у заказчика.

homm Mar 25 2013 at 22:09

Что вы имеете ввиду, говоря png24? Откуда там 24? Если количество бит, то откуда в 24 битах прозрачность?

Alexufo Mar 25 2013 at 22:14

16 бит полноцвет + 8 на прозрачность афльфаканала. Формат это беспотерьный.
Есть так же png8 это считай аналог gif современный.

Ну в фотошопе так разделен этот формат. Gif ну только радио анимации на сегодня только. Его прозрачность не примет ни один дизайнер, она там бесполезна абсолютно.

homm Mar 25 2013 at 22:31

> 16 бит полноцвет + 8 на прозрачность афльфаканала.
Нет такого формата хранения пикселей в png. Есть 8 бит на каждый из каналов rgba = 32 бита. Врет ваш фотошоп.

Alexufo Mar 25 2013 at 22:40

Не вели казнить государь.
en.wikipedia.org/wiki/True_Color#True_color_.2824-bit.29

True color — полноцвет не 16 как, я сказал а 24 бита. Остальное на альфу.
В fireworks формат называется png32 а в шопе он же png24.

Ntropy Mar 27 2013 at 02:55

Читал, что в GIF можно задавать палитру для каждой строки изображения, это дало бы хорошее качество картинки.

homm Mar 27 2013 at 12:28

Только если каждая строчка будет в отдельном кадре gif-анимации. TrueColor GIF

Renzo Jun 7 2013 at 12:44

Java canvas was ist das? xD

Show the best of all time