[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Рисование тепловой карты - Heatmap - веб-страницы
Kumena
Доброго дня, коллеги!
Посоветуйте пожалуйста решение вот такой задачи:

Требуется средствами PHP рисовать "тепловую карту" (heatmap) веб-страницы, основываясь на её скриншоте-картинке.

Предполагаемое решение: определить наиболее контрастные зоны на картинке и получить матрицу значений, по которой

следующим шагом рисовать размытые узоры наподобии http://cancanit.com/images/hhmap.png. Размер картинки-скриншота

- 640х480 пикселей, можно и изменить.

Пожалуйста поделитесь идеями и подскажите возможное решение для определения контрастных зон на картинке-скриншоте.

Заинтересованных в таком скрипте приглашаю объединить усилия.



Спустя 25 минут, 43 секунды (30.05.2012 - 11:44) redreem написал(а):
тут дело не в самом скриншоте, а в "поведении пользователя". такие сервисы отслеживают движения мышки и клики и уже на их основе строится "тепловая карта".

UPD: хотя нет, почитал по ссылке - анализируется именно скриншот. только вот думается, что большого смысла в этом нет, так как восприятие человека зависит далеко не только от констрастности областей, а еще из кучи всяких нюансов.

Спустя 4 часа, 58 минут, 25 секунд (30.05.2012 - 16:42) Kumena написал(а):
Вы совершенно правы, но в моём распоряжении нет пользовательских сигналов (данных о кликах). Но есть скриншоты. Отсюда и появилась идея привязаться к контрастным зонам картинки, т.е. тем, которые имеют большие различия по значениям в RGB.

Спустя 35 минут, 2 секунды (30.05.2012 - 17:17) vital написал(а):
Ну так возьмите картинку, сделайте ее черно-белой.
Выделите самые темные участки(от #000000 до cколько там нужно, поэксперементируйте), размойте каким-нить алгортимом края - на этой же картинке или по полученным коардинатам на исходной.

Как определить цвет пикселя легко найти в гугле..как черно белой сделать тоже. Спрашивайте что не понятно.

Профит.

Спустя 21 минута, 20 секунд (30.05.2012 - 17:39) redreem написал(а):
я думаю надо делать что-то типа:

1. перевести картинку в градации серого.

2. построить несколько пикселизаций - разбиений на "квадратики" по 4, 8, 16 и т.п. пикселей и усреднением уровня яркости "области".

3. для каждой такой пикселизации построить матрицу - копию усредненных областей, в ячеки которой записать коэффициент контрастности области по отношению ко всем соседним (над вычислением этого коэффициента можно по всякому поколдовать).

4. для матрицы, имеющей самое большое разрешение - т.е. по сути "копии" исходного изображения произвести перерасчет коэффициентов пикселей, исходя из того, что находится в других матрицах, непосредственно "перекрывающих" этот пиксель.

5. в результате получится какая-то картинка уровней, которая вполне может считаться за вариант решения задачи. раскрасить диапазоны уровней в свой цвет - вуаля!


Спустя 12 часов, 27 минут, 38 секунд (31.05.2012 - 06:06) Kumena написал(а):
Большое спасибо отозвавшимся!

На данный момент получилась функция, возвращающая двумерный массив уровней контраста пикселей.

Решил попробовать без переведения скриншота в градации серого. Обрабатываю картинку 202х152 пикселей попиксельно в цикле.
В цикле текущий пиксель:

$contrast=0;

$rgbc = imagecolorat($image, $i2, $i1); // get the rgb value for current pixel
$rc = ($rgb >> 16) & 0xFF; $gc = ($rgb >> 8) & 0xFF; $bc = $rgb & 0xFF; // extract each value for r, g, b
$VC = round(($rc + $gc + $bc) / 3); // get the Value from the RGB value



Соседние с ним пиксели:

         if ($i2!=($width-1)){
$rgb = imagecolorat($image, $i2+1, $i1); // get the rgb value for right pixel
$r = ($rgb >> 16) & 0xFF; $g = ($rgb >> 8) & 0xFF; $b = $rgb & 0xFF; // extract each value for r, g, b
$V = round(($r + $g + $b) / 3); // get the Value from the RGB value
$contrast=$contrast+abs($VC-$V);
}


round(($r + $g + $b) / 3)
позволил попробывать обойтись без переведения скриншота в градации серого.


На выходе функции получил двумерный массив 202х152 неких значений, :) определяющих отличие текущего пикселя от соседей. Сейчас хочу пробовать по ним что-то рисовать. Есть великолепный JavaScript от http://www.patrick-wied.at/static/heatmapj...static_heatmap/ . Вот бы такое для PHP!

PS: Нет, это не скрипт взлома капчи )

Спустя 10 минут, 8 секунд (31.05.2012 - 06:16) Kumena написал(а):
Придумалось попробовать сделать такое подобие работы слоями Photoshop-а:

По полученной матрице сделать три прохода и создать три прозрачные картинки PNG: для низких (синим цветом), средних (оранжевым) и высоких(красным цветом) уровней контрастности. В результате отдавать наложение этих картинок от красного к синему.

Спустя 1 день, 8 часов, 10 минут, 13 секунд (2.06.2012 - 14:27) Kumena написал(а):
Еще раз - большое спасибо отозвавшимся!

Скрипт написан и запущен в пробное публичное пользование! smile.gif

Готовые Heatmap-ы сайтов Вы можете посмотреть на страничках анализа, например: http://cancanit.com/www/Phpforum.ru/.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.