Stdit21 фев 2012 в 16:31

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

3 мин

9.1K

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

+48

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

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

bost84 21 фев 2012 в 17:12

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

mariofag 21 фев 2012 в 17:41

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

smallbox 21 фев 2012 в 17:47

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

kafeman 21 фев 2012 в 18:00

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

powder96 21 фев 2012 в 18:38

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

TheShock 21 фев 2012 в 22:23

Капча в node.js

adamantine 21 фев 2012 в 18:06

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

Fesor 21 фев 2012 в 23:49

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

Evengard 22 фев 2012 в 05:27

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

Keyten 22 фев 2012 в 14:18

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

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

orangefox 21 фев 2012 в 18:10

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

Flying 22 фев 2012 в 07:58

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

venn 21 фев 2012 в 18: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 в 18:19

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

asci 21 фев 2012 в 18:44

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

Stdit 21 фев 2012 в 21:39

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