Stdit 21 фев 2012 в 20:31

Пиксельные искажения с билинейной фильтрацией в HTML5 canvas

3 мин

8.7K

JavaScript*Обработка изображений*Canvas*

+49

Комментарии 23

НЛО прилетело и опубликовало эту надпись здесь

bost84 21 фев 2012 в 21:12

мне кажется пост лучше переместить в блог canvas

mariofag 21 фев 2012 в 21:41

Психоделично :3

smallbox 21 фев 2012 в 21:47

Практичнское применение? Каптча?

kafeman 21 фев 2012 в 22:00

Генерировать каптчу на стороне клиента? Не уверен, что у вас получится…

powder96 21 фев 2012 в 22:38

Здесь хорошее описание алоритма. Просто портируете JS-Canvas на PHP-Gd — и вот вам искажение для капчи. Я как раз и собираюсь воткнуть эти искажающие алгоритмы в свою супер-навороченную капчу.

TheShock 22 фев 2012 в 02:23

Капча в node.js

adamantine 21 фев 2012 в 22:06

HTML5 игры, различные визуальные эффекты в них. Вполне подойдет.

Fesor 22 фев 2012 в 03:49

Иногда возникают специфические требования аля имитации 3D (тобиш по сути наложение текстуры на примитив.

Evengard 22 фев 2012 в 09:27

Я тож сначала подумал, что пост будет про капчи, увидев картинку)

Keyten 22 фев 2012 в 18:18

Свой фотошоп на JS написать :). Парсер psd-файлов уже есть, несколько фильтров есть, цветовые фильтры типа Hue/Saturation написать в два счёта…

НЛО прилетело и опубликовало эту надпись здесь

orangefox 21 фев 2012 в 22:10

Демомейкинг, короче :)

Flying 22 фев 2012 в 11:58

Сразу об этом же подумал как увидел статью :)

venn 21 фев 2012 в 22:09

Спасибо за интересную статью.
P.S.
Можно еще учитывать скроллинг страницы, добавив величину прокрутки в определении dst.style.top:
dst.style.top = e.clientY-(Math.floor(dst.height/2))+ (window.pageYOffset || document.documentElement.scrollTop) +'px';

iSeiryu 21 фев 2012 в 22:19

Мне отражение понравилось. Можно в игровых заставках динамически использовать или для лого.

asci 21 фев 2012 в 22:44

Спасибо за статью, очень познавательно.
А для нахождения края изображения (с прозрачными областями) ничего нету? Хотелось бы программно делать подсветку объектов в играх (ну и кешировать ее сразу), что бы не жанглировать кучей картинок.

Stdit 22 фев 2012 в 01:39

Для этого есть своя куча алгоритмов. Самый простой и топорный алгоритм подсветки — сканируем картинку, находим все 4-пиксельные квадратные участки и заменяем прозрачные рядом с непрозрачными на подсвеченные.