Могу посоветовать, с чего начать.
1) кладем картинку на canvas
2) получаем при помощи
getImageData() массив пикселов
3) пытаемся тыкать в него палочкой
Пункт 3 как бы самый интересный, но тут программировать надо.
Я ради фана
соорудил вот такую тупую демку на CodePen, называется "Png to Html". Оттуда можно скопипастить первые два пункта и примерно понять, чо делать с третьим. Оно читает картинку из file-input, кладет на канву, затем считывает попиксельно, и для пикселов, у которых альфа-канал не равен 1 и цвет не белый (точнее avg от rgb < 250) создает DOM-узел, раскрашенный нужным цветом и спозиционированный в нужное место. И обязательно с css-анимацией! +) Так что берегите свои браузеры )))
Дальше вам надо эти пиксели как-то сгруппировать. Я бы начал с чтения статьи
Connected-component labeling и гугления слов оттуда с приставкой "js". Придумаете реализацию - расскажите нам =)
А, ну и вместо канвы можно изучить png-декодеры, они бывают для браузера (если у вас только сервер - соответственно, с них и начинаем). Должно работать шустрее, но не так наглядно.
